Bug estranho. Para de definir o número aleatório. | Lógica de programação: explore funções e listas

Olá, pessoal! Tudo bem?

Fiz o código. Ele está certo (aparentemente), mas quando estou realizando testes, em algum momento (não identifiquei um padrão sobre isso) o JS para de setar um número para a variável de número aleatório. É meio aleatório o momento que ele para de setar, eu posso ter feito 4 tentativas, ou 8 etc.

Quando eu busco a variável no console diz que está 'undefined'.

Não entendi o motivo disso acontecer, mesmo revisando o código.

Código abaixo HTML:

<body>

    <div class="container">
        <div class="container__conteudo">
            <div class="container__informacoes">
                <div class="container__texto">
                    <h1></h1>
                    <p class="texto__paragrafo"></p>
                </div>
                <input type="number" min="1" max="10" class="container__input">
                <div class="chute container__botoes">
                    <button onclick="chutar()" class="container__botao">Chutar</button>
                    <button onclick="newGame()" id="reiniciar" class="container__botao">Novo jogo</button>
                </div>
            </div>
            <img src="./img/ia.png" alt="Uma pessoa olhando para a esquerda" class="container__imagem-pessoa" />
        </div>
    </div>




    <script src="app.js" defer></script>
</body>

</html>

Código abaixo JS:

// Cria uma lista vazia, para inserir os números aleatórios.
let listaDeNumeros = []

// Declara as variáveis com o botão
let botaoChute = document.querySelector('button')
let botaoNovoJogo = document.querySelector('button#reiniciar')

// É o número aleatório.
let numeroAleatorio = geradorDeNumerosAleatorios(10)

// Função para substituir o conteúdo HTML de algo.
function inserirHTML(tag, texto){
    let titulo = document.querySelector(tag)
    titulo.innerHTML = texto
}

// Insere as mensagens iniciais na tela.
mensagensIniciais()

// Realiza algumas inserções HTML.
            function mensagensIniciais(){
                inserirHTML('h1', 'Jogo da Adivinhação!')
                inserirHTML('p.texto__paragrafo', '<p>Escolha um número entre 1 e 10.</p>')
            }

// Desativa o botão de Novo Jogo
btnNovoJogo_Desativado()

// Função que gera um valor aleatório.
        function geradorDeNumerosAleatorios(valorMaximo){
            let valorAleatorioGerado = parseInt(Math.random() * valorMaximo + 1)
            if (listaDeNumeros.includes(valorAleatorioGerado)){
                geradorDeNumerosAleatorios(10)
            } else {
                listaDeNumeros.push(valorAleatorioGerado)
                console.log(listaDeNumeros)
                return valorAleatorioGerado
            }
        }

// Apaga o campo de chute.
function apagaCampoChute(){
    let campoChute = document.querySelector('.container__input')
    campoChute.value = ''
}

// Funções de Botões
            // Função que desativa o botão de Novo Jogo
            function btnNovoJogo_Desativado(){
            botaoNovoJogo.setAttribute('disabled', '')
            }
            // Função que desativa o botão de Chute
            function btnChute_Desativado(){
                botaoChute.setAttribute('disabled','')
            }
            // Função que ativa o botão de Novo Jogo
            function btnNovoJogo_Ativado(){
                botaoNovoJogo.removeAttribute('disabled')
            }
            // Função que ativa o botão de Chute
            function btnChute_Ativado(){
                botaoChute.removeAttribute('disabled')
            }

// Função para realizar o chute.
function chutar(){
    // Aqui declara a variável.
    let numeroEscolhido = document.querySelector('input').value
    // Aqui valida se o valor chutado é o mesmo que o aleatório.
    if(numeroEscolhido == numeroAleatorio) {
        // Acertou!
        inserirHTML('h1','Você acertou!')
        inserirHTML('p',`Parabéns! Você acertou! O número era ${numeroAleatorio}`)
        // Desativar o botão de chute.
        btnChute_Desativado()
        // Ativar o botão de novo jogo.
        btnNovoJogo_Ativado()
    } else if (numeroEscolhido < numeroAleatorio){
        // Errou por um número menor.
        inserirHTML('h1','Você errou!')
        inserirHTML('p',`O número correto é maior que ${numeroEscolhido}`)
    } else {
        // Errou por um número maior.
        inserirHTML('h1','Você errou!')
        inserirHTML('p',`O número correto é menor que ${numeroEscolhido}`)
    }
}

function newGame(){
    console.clear()
    btnNovoJogo_Desativado()
    btnChute_Ativado()
    mensagensIniciais()
    apagaCampoChute()
    numeroAleatorio = geradorDeNumerosAleatorios(10)
}

Oi Gabriel, tudo bem?

Isso está acontecendo quando o número gerado já está na lista de números, bem nessa validação:

// Função que gera um valor aleatório.
            ...
            if (listaDeNumeros.includes(valorAleatorioGerado)){
                geradorDeNumerosAleatorios(10)
            }
            ...

Nesse trecho, você não está retornando o resultado da função quando você chama ela novamente.

Para resolver, basta colocar um return antes da chamada da função:

// Função que gera um valor aleatório.
            ...
            if (listaDeNumeros.includes(valorAleatorioGerado)){
                return geradorDeNumerosAleatorios(10)
            }
            ...

Lembre-se que quando você atualiza o valor da variável numeroAleatorio dentro da função newGame(), o que vale é o valor retornado pela função geradorDeNumerosAleatorios(10) quando você a chama pela primeira vez, independente se ela vai ser reexecutada internamente, por isso é importante garantir que todas as pontas retornem um valor.

Espero ter ajudado :)

Mergulhe em programação