Adivinha com 3 tentativas | JavaScript e HTML: desenvolva um jogo e pratique lógica de programação

Estou tentando ajustar o comando para que o jogo conceda 3 tentativas de adivinhação. Quando eu acerto o numero, ele exibe as mensagens corretas, mas quando erro, é como se usasse as 3 tentativas de uma vez só. Gostaria de saber o que estou fazendo de errado, pois não consegui identificar hahaha

<html lang="pt-br">
    <meta charset="UTF-8">
    <head>
        <title>Adivinha Numero</title>
    </head>
    <body>
        Por favor, adivinhe um número enter 0 e 5!<br>
        <input/>
        <button>Adivinhe!</button>
        <script>

            //mensagem de boas vindas
            function bemVindo(){
                alert("Seja bem vindo ao jogo de tentativas! Você terá 3 chances para adivinhar o número escolhido!")
            };

            //funçao para printar mensagem
            function imprimeFrase(frase){
                document.write(frase);
            };

            //funçao para pegar numero p adivinhaçao
            function sorteiaNum(){
                return Math.round(Math.random()*6);
            };

            //var de tentativas, numero do palpite, numero aleatorio e imprime o mesmo no log, 
            //junto da mensagem de boas vindas
            var tentativas = 0;
            var numAdivinhado = document.querySelector("input");
            var numSorteado = sorteiaNum()
            console.log(numSorteado);
            bemVindo();

            //funçao pega numero inserido e compara com o aleatorio. SE iguais, exibe primeira mensagem e finaliza.
            //SE erra, exibe mensagem de palpite incorreto e o usuário pode tentar mis uma vez
            function adivinhacao(){
                while(tentativas < 3){                                                             
                    if (numAdivinhado.value == numSorteado){
                        alert("Parabéns! Você acertou!");
                        break;
                    } else {                             
                        alert("Você errou o palpite!");                                                
                    };
                    tentativas ++;
                    console.log(tentativas);
                }
                alert("Fim de jogo! O número misterioso era " + numSorteado + "!");
            }

            //variavel para o botao chamar a funçao de comparaçao
            var button = document.querySelector("button");
            button.onclick = adivinhacao;

        </script>
        <main>
        </main>
        <footer>
        </footer>
    </body>
</html>

Olá, Vitor. Tudo bem?

O que está acontecendo no seu código é o seguinte: como você está executando as tentativas dentro de um while, você não permite que o jogador digite outro número, ou seja, quando você erra, o número que o jogador digitou continua o mesmo.

O que você pode fazer para resolver isso?

Como o while está sendo a pedra no nosso sapato, nós podemos utilizar uma alternativa, que seria a seguinte: utilizar um if para saber se o jogador atingiu o número máximo de tentativas. Podemos fazer isso dessa forma:

if (tentativas == 3){      
    alert("As tentativas acabaram. O número misterioso era " + numSorteado + "! Não desanime, vamos jogar novamente!");
}

Pronto, agora você pode saber se o jogador atingiu o número máximo de tentativas sem precisar de um while.

Mas o que a gente faria depois que o número máximo de jogadas chegasse ao fim? Podemos reiniciar o jogo! Podemos fazer isso colocando as variáveis tentativas e numSorteado e a chamada da função bemVindo() dentro de uma função e reiniciar os valores delas, dessa forma:

function iniciaJogo(){
    tentativas = 0;
    numSorteado = sorteiaNum();
    bemVindo();
}

Agora, a gente chama essa função tanto depois de acertar quanto depois que as tentativas acabarem.

Com isso, a gente não só já pode utilizar várias tentativas, como também podemos reiniciar o jogo.

O código final ficará assim:

<html lang="pt-br">
    <meta charset="UTF-8">
    <head>
        <title>Adivinha Numero</title>
    </head>
    <body>
        Por favor, adivinhe um número enter 0 e 5!<br>
        <input>
        <button>Adivinhe!</button>
        <script>

            //mensagem de boas vindas
            function bemVindo(){
                alert("Seja bem vindo ao jogo de tentativas! Você terá 3 chances para adivinhar o número escolhido!")
            };

            //funçao para printar mensagem
            function imprimeFrase(frase){
                document.write(frase);
            };

            //funçao para pegar numero p adivinhaçao
            function sorteiaNum(){
                return Math.round(Math.random()*6);
            };

            //var de tentativas, numero do palpite, numero aleatorio e imprime o mesmo no log, 
            //junto da mensagem de boas vindas

            let tentativas = 0;
            let numSorteado = sorteiaNum();
            let numAdivinhado = document.querySelector("input");

            function iniciaJogo(){
                tentativas = 0;
                numSorteado = sorteiaNum();
                bemVindo();
            }

            iniciaJogo();

            function adivinhacao(){

                if (numAdivinhado.value == numSorteado){
                    alert("Parabéns! Você acertou! Vamos Jogar novamente!");
                    iniciaJogo();
                } else {
                    alert("Você errou o palpite! Tente novamente.");
                    tentativas++;
                    if (tentativas == 3){      
                        alert("As tentativas acabaram. O número misterioso era " + numSorteado + "! Não desanime, vamos jogar novamente!");
                        iniciaJogo();
                    }
                }

            }

            //variavel para o botao chamar a funçao de comparaçao
            let button = document.querySelector("button");
            button.onclick = adivinhacao;

        </script>
        <main>
        </main>
        <footer>
        </footer>
    </body>
</html>

Por fim, perceba que mudei as variáveis que eram var para let, pois variáveis do tipo var podem trazer problemas para o nosso código. Para entender mais sobre os tipos de variáveis no JavaScript, você pode ler este artigo da Alura: Entenda a diferença entre var, let e const no JavaScript.

Espero ter ajudado, Vitor. Se tiver mais alguma dúvida, estou à disposição. Bons estudos =)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!