0

Eu havia feito esse jogo usando textbox, e funcionou tudo ok, porém resolvi fazer uma modificação e ao invés de digitar coloquei imagens respectivas ao jokenpô e a imagem que o user clicar vai ser comparada e devolveria para o usuário quem ganhou, de inicio seria feito no alert mesmo. Meu problema está em pegar a opção do usuário e atribuir a uma variável e fazer essa comparação. Como posso fazer isso?

$(document).ready(function(){

var choice = null;  
//Gera a opção do computador
var computerChoice = Math.random();

if (computerChoice < 0.34) {
    computerChoice = "Pedra";

} else if(computerChoice <= 0.67) {
    computerChoice = "Papel";
} else {
    computerChoice = "Tesoura";
} 

//Pedra
$('#pedra, #papel, #tesoura').on('click',function(){

    if((computerChoice == choice) || (computerChoice == choice)||(computerChoice == choice))
            alert("Empate");
    else if (choice === "pedra") {
      if (computerChoice === "tesoura")
            alert("pedra vence");
        else {
            alert("papel vence");
        }
    }
    else if (choice === "papel") {
        if (computerChoice === "pedra")
            alert("papel vence");
        else {
            alert("tesoura vence");
        }
    }
    else if (choice === "tesoura") {
        if (computerChoice === "pedra")
            alert("pedra vence");
        else {
            alert("tesoura vence");
        }
    } 
   });

});
1
  • Você pode usar o atributo data e definir um valor para cada imagem. Ex: <img src="tesoura.jpg" data-valor="tesoura" /> Depois é só você recuperar o valor do atributo na hora do click. var choice = $(this).data("valor");
    – user41722
    Commented 24/10/2017 às 13:50

2 Respostas 2

1

Você pode adicionar o atributo name com o determinado valor as suas imagens ou div que as pertencem

Exemplo

Clique nas palavras para definir a variável.

$('div').on('click', function(){

  var escolha = $(this).attr('name');
  $('span').html('');
  $('span').html('O valor da variável é: '+escolha);


});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div name='pedra'>Pedra</div>
<div name='papel'>Papel</div>
<div name='tesoura'>Tesoura</div>

<span></span>

2
  • Obrigado mano, pela atenção e por me ajudar! Commented 24/10/2017 às 14:26
  • Por nada! Estamos ai.
    – Bsalvo
    Commented 24/10/2017 às 14:28
0

Basta utilizar o $(this) dentro da função do clique, no caso ele apontará para o botão que disparou o evento click e te permitirá identificar qual imagem foi escolhida.

No seu caso apenas adicinando isso na função do click já funcionará, pois pego o ID do elemento selecionado e comparo com a escolha do computador (no caso coloquei ID em botões mas você pode fazer isso em imagens)

 var choice = $(this).prop("id").toLowerCase(); 
 computerChoice = computerChoice.toLowerCase();

Entenda melhor como funciona o this/$(this)

Fiz um exemplo, veja abaixo:

$(document).ready(function(){

var choice = null;  
//Gera a opção do computador
var computerChoice = Math.random();

if (computerChoice < 0.34) {
    computerChoice = "pedra";

} else if(computerChoice <= 0.67) {
    computerChoice = "papel";
} else {
    computerChoice = "tesoura";
} 

//Pedra
$('#pedra, #papel, #tesoura').on('click',function(){

    //Obtenho a escolha do usuário
    var choice = $(this).prop("id").toLowerCase(); 
    computerChoice = computerChoice.toLowerCase();
    
    console.log('Escolha do pc: ' + computerChoice);
    console.log('Escolha da pessoa: ' + choice);

    if((computerChoice == choice) || (computerChoice == choice)||(computerChoice == choice))
            alert("Empate");
    else if (choice === "pedra") {
      if (computerChoice === "tesoura")
            alert("pedra vence");
        else {
            alert("papel vence");
        }
    }
    else if (choice === "papel") {
        if (computerChoice === "pedra")
            alert("papel vence");
        else {
            alert("tesoura vence");
        }
    }
    else if (choice === "tesoura") {
        if (computerChoice === "pedra")
            alert("pedra vence");
        else {
            alert("tesoura vence");
        }
    } 
   });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="pedra">Pedra</button>
<button id="papel">Papel</button>
<button id="tesoura">Tesoura</button>

1
  • Muito obrigado, agora entendi, eu tinha usado o this. porém coloquei de uma outra forma, mais uma vez, obrigado pela excelente explicação e pelo exemplo. Commented 24/10/2017 às 14:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .