Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Jogo adivinha não funciona com o while ....

<meta charset="utf-8">

<input/>
<button>Comapare com o meu segredo</button>



<script >


   var segredo = Math.round(Math.random() * 10);
   console.log(segredo);   

   var input = document.querySelector("input");
   input.focus();

   function verifica() {

    var tentativas = 1;
    while( tentativas <= 3)
   { 
         if(input.value == segredo)
      {
       alert("Você acertou!");
       break;
      }   
      else
      {
        alert("voce errou! Tente novamente");
      }
     tentativas++;
   } 
      mostra("fim");

        input.value = " ";
        input.focus();
}
   var button = document.querySelector("button");

   button.onclick = verifica;    


</script>


//Quando chega no "else" ele trava por 3x com o alert e exibe o "FIM" em seguida,  mas nao incrementa, voltando ao estagio inicial, so funciona quando entra no 1º "if" , ou seja, quando acerto de primeira. Onde estou errando ?
2 respostas
solução!

Olá, Mauro, tudo bem?

O problema é que dentro da função verifica, que é chamada quando você clica no botão, você está fazendo uma repetição com o while. Na verdade, ao usar o botão, não queremos fazer uma repetição e sim uma única verificação (que é se a pessoa acertou o número ou não).

Então a primeira coisa que você deve fazer é trocar o while por um if. E como consequência, você também deve tirar a instrução break;, ou o console indicará um erro (pois só podemos usar o break dentro de laços de repetição). O código da sua função fica assim:

  function verifica() {

    var tentativas = 1;
    if (tentativas <= 3) {  // Troquei de while para if
      if (input.value == segredo) {
        alert("Você acertou!");
        // Removi o break;
      }
      else {
        alert("voce errou! Tente novamente");
      }
      tentativas++;
    }
    mostra("fim");

    input.value = " ";
    input.focus();
  }

Mas também não queremos que a instrução mostra("fim"); seja executada depois do primeiro erro! Queremos que ela seja exibida apenas quando não houverem mais tentativas. Então, em contrapartida com o bloco if (tentativas <= 3), vamos criar um bloco else, que será executado quando o número de tentativas ultrapassar 3, e mover o código mostra("fim"); lá para dentro:

  function verifica() {

    var tentativas = 1;
    if (tentativas <= 3) {
      if (input.value == segredo) {  // Troquei de while para if
        alert("Você acertou!");
      }
      else {
        alert("voce errou! Tente novamente");
        // Removi o break;
      }
      tentativas++;
    } else {  // Criei o bloco else
      mostra("fim");  // Movi a instrução aqui para dentro
    }

    input.value = " ";
    input.focus();
  }

Mas ainda tem um problema! Se você executar o código acima, verá que as tentativas do usuário nunca acabam. Te dou essa chance pra tentar descobrir o problema antes de te passar a solução abaixo.

O motivo que isso está acontecendo é: estamos declarando var tentativas = 1; dentro da própria função verifica! Ou seja, sempre que clicamos no botão, essa variável é redeclarada com valor 1, e assim ela nunca chega no valor 3 ou 4. A solução é basicamente fazer essa declaração fora da função verifica. Dentro da função, apenas somaremos 1 ao valor da variável tentativas quando a pessoa errar o número (isso já está sendo feito). Então teremos isso:

  var tentativas = 1;  // Declarei a variável fora da função

  function verifica() {

    if (tentativas <= 3) {  // Troquei de while para if
      if (input.value == segredo) {
        alert("Você acertou!");
        // Removi o break;
      }
      else {
        alert("voce errou! Tente novamente");
      }
      tentativas++;
    } else {  // Criei o bloco else
      mostra("fim");  // Movi a instrução aqui para dentro
    }

    input.value = " ";
    input.focus();
  }

  var button = document.querySelector("button");

  button.onclick = verifica;

Agora o programa está funcional! Entretanto, do jeito que está, o resultado do jogo não é exibido imediatamente na tela quando o usuário ganha ou perde, e sim apenas quando clica no botão pela 4ª vez. Deixo como desafio você tentar melhorar isso :)

Espero ter ajudado! Se tiver mais dúvidas ou dificuldades, ficaremos felizes em te auxiliar. Abraços e bons estudos!

Caso esta resposta tenha resolvido sua dúvida, por favor, marque como solucionada ✓. Bons Estudos!

Valeu Antonio pela ajuda, vou refazer aqui, ajudou bastante.