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

TRÊS TENTATIVAS COM INPUT e BUTTON

Gostaria de adicionar o código de jogo adivinha que utiliza input e button, que ao colocar em input e erra ele tenha mais duas chances. Tentei fazer por for, mas não sei qual variável seria no lugar de i, como medirei a quantidades de input ou button que o Usuário colocou?

<!DOCTYPE HTML>

<HTML lang="pt-br">
    <head>
        <meta charset="utf-8">
        <title>Alura</title>
    </head>
    <body>
        <h1>Jogo de Adivinhação com botões</h1>

        <p>vamos fazer um jogo de adivinhação, caso insira o numero no 
        campo abaixo e vamos ver se acerta ou erra</p>

        <input/>

        <button>ADIVINHAR</button>

        <script>
            function pulaLinha (){
                document.write ("<br>");
            }
            function mostra (frase){
                document.write(frase);
                pulaLinha ();
            }

            var input = document.querySelector("input");
            var sorteado = Math.round (Math.random () * 10);

            function sorteio () {
                for (var i = 0; i < 3; i++){
                    if (input == sorteado){
                    mostra("Parabéns sortudo, você acertou");
                    break;
                    }else {
                    mostra("Eita, não foi dessa vez o numero sorteado foi " + sorteado);
                    }
                }
            }
            var button = document.querySelector("button");

            button.onclick = sorteio; //onlick == em um clique

        </script>
    </body>
</HTML>
3 respostas
solução!

Fala Olga, Tudo bem?

Sobre a variável "i" no for, ela serve para controlar a repetição do código.

Eu achei uma solução com o laço while porém, precisei adaptar as informações para as novas chances usando o alert para avisar o usuário sobre os erros e dicas para tentar achar o número sorteado pela máquina.

Dá uma olhada no códgo abaixo e me diz ser era parecido com esse resultado.

<!DOCTYPE HTML>

<HTML lang="pt-br">

<head>
    <meta charset="utf-8">
    <title>Alura</title>
</head>

<body>
    <h1>Jogo de Adivinhação com botões</h1>

    <p>vamos fazer um jogo de adivinhação, caso insira o numero no
        campo abaixo e vamos ver se acerta ou erra</p>

    <input />

    <button>ADIVINHAR</button>

    <script>
        function pulaLinha() {
            document.write("<br>");
        }
        function mostra(frase) {
            document.write(frase);
            pulaLinha();
        }

        var input = document.querySelector("input");
        var sorteado = Math.round(Math.random() * 10);

        let tentativas = 0
        function sorteio() {
            const aposta = parseInt(input.value)
            if (aposta == sorteado) {
                mostra('Parabéns. Você acertou!')
            } else {
                tentativas++
                alert(`Você errou e ainda tem ${3 - tentativas} tentativas`)
                aposta > sorteado ? alert('Tente um número menor') : alert('Tente um número maior')
            }
            if (tentativas == 3) {
                mostra('Game Over! Você errou em todas as tentativas!')
                tentativas = 0
            }
        }

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

        button.onclick = sorteio; //onlick == em um clique

    </script>
</body>

</HTML>

Fiz o teste e ficou muito bom, principalmente com as dicas, obrigadoo, vou dar uma pesquisada em como ele esta funcionando pois algumas coisas eu não vi ainda. vlww

Olga,

Que bom que gostou.

Se quiser tirar alguma dúvida é só falar que tento te ajudar, beleza?