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!