Entrar Ainda não tem acesso?
3
respostas

Jogo da adivinhacao utilizando "button" e "input "

Referente ao curso JavaScript e HTML: desenvolva um jogo e pratique lógica de programação, no capítulo Interaja de maneira diferente com o usuário e atividade Consolidando seu conhecimento

por Janile Oliveira Dantas
| 390.6k xp | 174 posts
Frontend Developer

tentei criar o jogo da adivinhacao utilizando o button e o input, mas nao sei de que maneira tenho que modificar o codigo para que o usuario possa ter 3 chances para acertar o numero. De acordo com o meu codigo a mensagem "Voce errou" ja aparece as 3 vezes seguidas apenas o usuario erra a primeira vez.

<meta charset="UTF-8">

<input/>
<button>Vamos comparar?</button>

<script>

    function pulaLinha() {

        document.write("<br>");
    }

    function mostra(frase) {

        document.write(frase);
        pulaLinha();
    }

    function sorteia(n) {

        return Math.round(Math.random() * n);
    }

    function verifica() {

        var numeroTentativas = 1;

        while (numeroTentativas <= 3) {

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



         if(input.value == button.value) {

        mostra("Uau! Você acertou, pois eu pensei no " + button.value);
        break;

        } else {

        alert("Voce errou!");
        numeroTentativas++;
        input.focus();

        }

        }
        if (numeroTentativas > 3) {

        mostra("USUARIO BLOQUEADO");
        pulaLinha();

        }
        mostra("FIM")
    }

    var button = document.querySelector("button");
    button.value = sorteia(10);
    console.log(button.value);


    button.onclick = verifica;








</script>
3 respostas
por JONATHAS CAMPOS PIMENTA
| 334.2k xp | 9 posts
Assessor Administrativo III

Acho que se você modificar dessa forma, vai funcionar...

<html>
<head>
<meta charset="UTF-8">

<script>

    iniciar();

    function iniciar(){
        numeroTentativas = 1;
        valorSecreto = sorteia(10);
    }

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

    function mostra(frase) {
        document.write(frase);
        pulaLinha();
    }

    function sorteia(n) {
        return Math.round(Math.random() * n);
    }

    function verifica() {

        if(numeroTentativas <= 3) {

            var input = document.getElementById("chute");            
            //alert(valorSecreto);

            if (input.value == "") {
                alert('Voce deve escolher um valor numerico entre 0 e 10!')          
                return false;
            }

            if(input.value == valorSecreto) {

                mostra("Uau! Voce acertou, pois eu pensei no " + valorSecreto);            

            } else {

                alert("Voce errou!");
                numeroTentativas++;
                input.focus();

            }

        }
        if (numeroTentativas > 3) {

            mostra("USUARIO BLOQUEADO");
            pulaLinha();

        }

        //mostra("FIM");

        return false;
    }


</script>

</head>
<body>


<form onsubmit="return verifica()" method="post" action="#">    

<input type="text" id="chute" name="chute"/>
<button type="submit">Vamos comparar?</button>

</form>

</body>
</html>
por Alessandro da Silva Costa
| 157.4k xp | 4 posts

Oi Janile. Também tenho uma solução para este problema. Fiz alguns refinamentos e deixei comentários no próprio código. Espero que ajude na compreensão. Mas já adianto que o problema com o qual se deparou foi por usar um loop na função verifica. Lembre: a intenção é que a funcão verifica seja chamada cada vez que o botão fosse acionado. Porém, usando o loop, as tentativas eram todas esgotadas num único clique. A solução é guardar o número de tentativas para cada clique.

<meta charset="UTF-8">

<input/>

<button>clique-me</button>

<script>

    var entrada = document.querySelector("input"); // captura do elemento de entrada
    entrada.focus(); // a página carrega com o foco no campo de entrada
    var segredo = Math.round(Math.random() * 10); // sorteio de um número e o arredonda
    console.log("O segredo é " + segredo); // mostrar no console; pequena trapaça para teste

    var tentativasRestantes = 3; // chances para acertar
    var ganhouJogo = false; // no começo o jogador ainda não ganhou
    function verifica() {

        if(ganhouJogo) { // se já ganhou então não precisa verficar mais

            alert("Você já havia acertado o segredo");
        } else {

            var chute = entrada.value; // captura do valor da entrada

            if(tentativasRestantes > 0) { // se não tiver tentativas não vale!

                if(chute == segredo) {

                    alert("Você ACERTOU");
                    ganhouJogo = true; // acertou? ganhou!
                } else{

                    tentativasRestantes--; // se errou então perdeu uma tentativa
                    alert("Você ERROU. Tentativas restantes = " + tentativasRestantes);
                    entrada.value = ""; // limpar o campo de texto
                    entrada.focus(); // o campo de texto volta a ter foco
                }
            } else {

                alert("GAME OVER"); // se acabaram as tentativas então game over
            }
        }
    }

    var botao = document.querySelector("button"); // captura do botão

    botao.onclick = verifica; // associação da função verifica com o evento de clicar no botão

</script>
por Maison Galvão
| 1029.2k xp | 1128 posts
Moderador Desenvolvedor de Sistemas

Oi janile oliveira permanece alguma dúvida ou já foi solucionada ?