2
respostas

Como inserir número de chances para o usuário

Boa noite. Estou tentando inserir no código um número máximo de tentativas para o usuário tentar no máximo 3 vezes, Porém não esta funcionando. Cnseguem me auxiliar no que estou errando.

<meta charset = "UTF-8">

<h1>Tente advinhar meu segredo</h1>

<input/>
<button>Compare com meu segredo</button>

<script>
    var MeuSegredo = 8;
    //console.log (MeuSegredo);

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

    var tentativas = 1;

    function verifica(){
        if(tentativas <=3){
            if(input.value == MeuSegredo){
            alert ("Parabéns, você acertou!!!");
            break;

            } else{
                alert("Você Errou!!!");
                tentativas = tentativas + 1;
            }

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


</script>
2 respostas

Olá Ana, tudo bem? Achei legal a ideia, primeiramente lembre-se que variáveis devem ser declaradas com a primeira letra minúscula. Para não ficar um número estático podemos colocar um número aleatório entre 0 e 10:

var meuSegredo = Math.round(Math.random()*10);

Para uma melhor experiencia do usuário podemos alterar a tag h1 do HTML com a quantidade restantes de tentativas:

// Aqui alteramos no próprio HTML 
<h1>Tente adivinhar meu segredo, você tem 3 tentativas.</h1>

// No script criamos a variável h1 para que possamos alterar a tag conforme as //tentativas ocorrem:
var h1 = document.querySelector("h1");

Para utilizarmos a própria variável tentativas para atualizar o número de tentativas no h1, ao invés de somar a cada tentativa, podemos subtrair, iniciando ela no valor 2. Por que 2? Se observamos o h1 só sera atualizado após o primeiro erro, por padrão já definimos ele exibindo o valor 3, logo, quando o usuário errar, devemos atualizá-lo com o valor 2.

 var tentativas = 2;

A sua função verifica está no caminho certo, porém não existe a necessidade do break. Nós temos três possíveis opções: 1: O usuário errar mas ainda possuir tentativas. 2: O usuário errar e não possuir mais tentativas. 3: O usuário acertar.

Para isso devemos então colocar essas três possibilidades dentro da função, podendo seguir essa mesma ordem que foi pensada:

if(input.value != meuSegredo && tentativas > 0 ){
            alert("Errou! Você tem mais " + tentativas + " tentativas");
            tentativas--;
            h1.textContent = "Tente adivinhar meu segredo, você tem mais " + (tentativas+1) + " tentativas.";
        }else if(input.value != meuSegredo && tentativas == 0){
            alert("Acabaram as tentativas. Aperte [OK] pra jogar de novo!");
        }else{
            alert("Você acertou!! Parabéns!! Aperte [OK] para jogar de novo!");
        }
        input.value = ("");
        input.focus();
    }

Devemos observar duas coisas: No primeiro if é onde atualizamos á variável tentativas subtraindo-a em menos um e também atualizando quantas ainda restam no h1 e no alert. No segundo if, é necessário adicionar o input.value != meuSegredo, se não, na última tentativa, mesmo que o usuário acerte, entrará nesse if, mostrando um alert indesejado.

Mas ainda temos um problema, se o usuário ler essas mensagens do alerta e pressionar [OK], a variável meuSegredo continuará contendo o mesmo valor. Nesse caso poderíamos criar uma função que gera um número randômico para ela e chamá-la sempre que precisássemos atualiza-la. Além disso precisaríamos atualizar tanto a variável tentativa, quanto a variável h1 para os valores iniciais, ou seja, tentativas = 2 e h1 = "Tente adivinhar meu segredo, você tem mais " + (tentativas+1) + " tentativas.";

Podemos fazer algo mais simples criando uma função que recarrega a página, voltando a variável tentativa e a tag h1 para os valores iniciais ao atualizar, além de gerar um novo segredo:

function refresh(){
        window.location.reload();
    }

A função ficaria dessa maneira:

function verifica(){
        if(input.value != meuSegredo && tentativas > 0 ){
            alert("Errou! Você tem mais " + tentativas + " tentativas");
            tentativas--;
            h1.textContent = "Tente adivinhar meu segredo, você tem mais " + (tentativas+1) + " tentativas.";
        }else if(input.value != meuSegredo && tentativas == 0){
            alert("Acabaram as tentativas. Aperte [OK] pra jogar de novo!");
            refresh();
        }else{
            alert("Você acertou!! Parabéns!! Aperte [OK] para jogar de novo!");
            refresh();
        }
        input.value = ("");
        input.focus();
    }

E por fim nosso código estará pronto:

<meta charset = "UTF-8">

<h1>Tente adivinhar meu segredo, você tem 3 tentativas.</h1>

<input/>

<button>Compare com meu segredo</button>

<script>
    var meuSegredo = Math.round(Math.random()*10);
    var tentativas = 2;
    var input = document.querySelector("input");
    var h1 = document.querySelector("h1");

    input.focus();

    function verifica(){
        if(input.value != meuSegredo && tentativas > 0 ){
            alert("Errou! Você tem mais " + tentativas + " tentativas");
            tentativas--;
            h1.textContent = "Tente adivinhar meu segredo, você tem mais " + (tentativas+1) + " tentativas.";
        }else if(input.value != meuSegredo && tentativas == 0){
            alert("Acabaram as tentativas. Aperte [OK] pra jogar de novo!");
            refresh();
        }else{
            alert("Você acertou!! Parabéns!! Aperte [OK] para jogar de novo!");
            refresh();
        }
        input.value = ("");
        input.focus();
    }

    function refresh(){
        window.location.reload();
    }

    var button = document.querySelector("button");
    button.onclick = verifica;
</script>

Espero ter ajudado, qualquer dúvida estou a disposição Marcus.