Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Tentativas com while

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 Campo de texto e botão

por Estudante
| 48.8k xp | 20 posts

Oi gente, boa noite! Estou aqui quebrando a cabeça para saber se seria possível resolver o jogo de adivinhação com tentativas através do while... estou quase desistindo e resolvendo através de if's... segue o meu código:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Programa</title>
</head>
<body>
    <label for="numero">Digite um número entre 0 e 10:</label> 
    <input type="number" id="numero"><br><br>
    <button onclick="comparar()" id="btn">Compare com o meu segredo</button>

    <p id="resultado"></p>

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

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

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

        var numeroPensado = sorteia(10);
        console.log(numeroPensado);

        document.querySelector("#numero").focus();

        var tentativas = 1;
        var tentativasMaximas = 3

        function comparar() {
                var chute = parseInt(document.querySelector("#numero").value);
                console.log(chute);
                if (chute == numeroPensado) {
                    document.querySelector("#resultado").innerHTML = "Uau! Você acertou! O número pensado era " + numeroPensado;
                    document.querySelector("#btn").disabled = true;
                } else if (chute > 10 || chute < 0) {
                    document.querySelector("#resultado").innerHTML = "Você deve digitar um número entre 0 e 10"
                    document.querySelector("#numero").value = "";
                } else {
                    while (tentativas <= tentativasMaximas) {
                        if (tentativas < tentativasMaximas && chute > numeroPensado) {
                            document.querySelector("#resultado").innerHTML = "Você errou... o número que pensei é menor!";
                            document.querySelector("#numero").value = "";
                        } else if (tentativas < tentativasMaximas && chute < numeroPensado) {
                            document.querySelector("#resultado").innerHTML = "Você errou... o número que pensei é maior!";
                            document.querySelector("#numero").value = "";
                        } else if (tentativas == tentativasMaximas) {
                            document.querySelector("#resultado").innerHTML = "Você errou, e as tentativas acabaram :("
                            document.querySelector("#btn").disabled = true;
                        }
                        tentativas++;
                }
            }
        }

    </script>
</body>
</html>
3 respostas
por Estudante
| 48.8k xp | 20 posts

Eu consegui resolver com if's e else's, mas se alguém souber como resolver com while ou for, ficarei muito agradecida!

Segue o código da resolução com if's e else's:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Programa</title>
</head>
<body>
    <label for="numero">Digite um número entre 0 e 10:</label> 
    <input type="number" id="numero"><br><br>
    <button onclick="comparar()" id="btn">Compare com o meu segredo</button>

    <p id="resultado"></p>

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

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

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

        var numeroPensado = sorteia(10);
        console.log(numeroPensado);

        document.querySelector("#numero").focus();

        var tentativas = 0;

        function comparar() {
            var chute = parseInt(document.querySelector("#numero").value);
            console.log(chute);
            if (chute == numeroPensado) {
                document.querySelector("#resultado").innerHTML = "Uau! Você acertou! O número pensado era " + numeroPensado;
                document.querySelector("#btn").disabled = true;
            } else if (chute > 10 || chute < 0) {
                document.querySelector("#resultado").innerHTML = "Você deve digitar um número entre 0 e 10"
                document.querySelector("#numero").value = "";
            } else {
                if (tentativas < 3) {
                    tentativas++;
                    } if (chute > numeroPensado) {
                        document.querySelector("#resultado").innerHTML = "Você errou... o número que pensei é menor!";
                        document.querySelector("#numero").value = "";
                    } else if (chute < numeroPensado) {
                        document.querySelector("#resultado").innerHTML = "Você errou... o número que pensei é maior!";
                        document.querySelector("#numero").value = "";
                    } 
                } if (tentativas == 3) {
                    document.querySelector("#resultado").innerHTML = "Você errou, e as tentativas acabaram :("
                    document.querySelector("#btn").disabled = true;
                }


        }

    </script>
</body>
</html>
solução!
por Antônio Evaldo
| 416.9k xp | 636 posts
Alura Scuba Team

Olá, Anne, tudo bem?

Achei o seu programa incrível! Ficamos felizes que você encontrou a solução.

Na verdade, quando vamos utilizar um botão para fazer a verificação do número digitado, não é mais necessário utilizar um laço de repetição. Em programas anteriores, utilizamos um while ou um for para repetir uma mensagem de alerta, por exemplo.

Mas ao utilizar um botão, queremos fazer apenas uma verificação para cada clique do usuário, ou seja, devemos utilizar uma estrutura if. Poderíamos também dizer que os próprios cliques do usuário são a repetição, e que não é mais necessário uma estrutura de repetição no programa.

Agora uma dica: o que eu mudaria no seu programa seria apenas algumas partes que se repetiram. Por exemplo, na função comparar() você escreveu muitas vezes document.querySelector("#resultado") para mostrar a frase de resultado na tela, mas você poderia ter guardado o elemento HTML do resultado em uma variável, algo assim:

        var resultado = document.querySelector("#resultado"); // criei uma variável para o elemento HTML

        function comparar() {
            var chute = parseInt(document.querySelector("#numero").value);
            console.log(chute);
            if (chute == numeroPensado) {
                resultado.innerHTML = "Uau! Você acertou! O número pensado era " + numeroPensado;
                document.querySelector("#btn").disabled = true;
            } else if (chute > 10 || chute < 0) {
                resultado.innerHTML = "Você deve digitar um número entre 0 e 10"
                document.querySelector("#numero").value = "";
            } else {
                if (tentativas < 3) {
                    tentativas++;
                } if (chute > numeroPensado) {
                    resultado.innerHTML = "Você errou... o número que pensei é menor!";
                    document.querySelector("#numero").value = "";
                } else if (chute < numeroPensado) {
                    resultado.innerHTML = "Você errou... o número que pensei é maior!";
                    document.querySelector("#numero").value = "";
                }
            } if (tentativas == 3) {
                resultado.innerHTML = "Você errou, e as tentativas acabaram :("
                document.querySelector("#btn").disabled = true;
            }


        }

Isso é apenas para deixar o código um pouco mais organizado! Você pode fazer a mesma coisa para os elementos #numero e #btn.

Fora isso, achei muito legal como você explorou o HTML, usando a tag label, o atributo disabled do botão, etc.

Continue assim! Abraços e bons estudos :)

Caso esta resposta tenha resolvido sua dúvida, por favor, marque como solucionada ✓. Bons Estudos!
por Estudante
| 48.8k xp | 20 posts

Show Antônio, agora fez total sentido! E irei fazer sim as mudanças, obrigada! :)