1
resposta

Solução para Game Over

Boa tarde,

Na minha solução, fiz uma condicional para o game over logo no início da função que verificava se o chute era um valor válido. Se fosse true, ele mudava o que estava escrito na tela e a cor de fundo. Esse foi o código do arquivo validacao.js.

function verificaSeOChutePossuiUmValorValido(chute) {
    const numero = +chute;
    
    if (chute.toLowerCase() == 'game over') {
        document.body.innerHTML = `
        <h2>Game Over!</h2>
        <h3>O jogo terminou.</h3>

        <button id="jogar-novamente" class="btn-jogar">Jogar novamente</button>
        `
        document.body.classList.add("game-over");
        return;
    }

    if (chuteForInvalido(numero)) { 
        elementoChute.innerHTML += '<div>Valor inválido</div>';
        return;
    }

    if (numeroForMaiorOuMenorQueOValorPermitido(numero)) {
        elementoChute.innerHTML += `
        <div>Valor inválido: Fale um número entre ${menorValor} e ${maiorValor}</div>
        `;
        return;
    }

    if (numero === numeroSecreto) {
        document.body.innerHTML = `
        <h2>Você acertou!</h2>
        <h3>O número secreto era ${numeroSecreto}</h3>

        <button id="jogar-novamente" class="btn-jogar">Jogar novamente</button>
        `
    } else if (numero > numeroSecreto) {
        elementoChute.innerHTML += `
        <div>O número secreto é menor <i class="fa-solid fa-arrow-down-long"></i></div>
        `
    } else {
        elementoChute.innerHTML += `
        <div>O número secreto é maior <i class="fa-solid fa-arrow-up-long"></i></div>
        `
    }
}

function chuteForInvalido(numero) {
    return Number.isNaN(numero);
}

function numeroForMaiorOuMenorQueOValorPermitido(numero) {
    return numero > maiorValor || numero < menorValor;
}

document.body.addEventListener('click', e => {
    if (e.target.id == 'jogar-novamente') {
        window.location.reload();
    }
})

E esse foi o que acrescentei no arquivo style.css

.game-over {
    background-color: black;
}
1 resposta

Oi Camila, tudo bem?

Parabéns pela solução que você implementou! É admirável ver o seu raciocínio e criatividade ao lidar com diferentes situações no seu código.

A sua condicional para verificar se o chute é um valor válido e, em seguida, alterar o conteúdo e a cor de fundo da tela é uma abordagem inteligente. Isso não apenas garante uma melhor experiência para o usuário, mas também demonstra sua atenção aos detalhes.

Além disso, ao adicionar a classe "game-over" no arquivo style.css e definir a cor de fundo como preto, você conseguiu transmitir visualmente o fim do jogo de forma eficaz.

Continue assim, explorando diferentes possibilidades e aprimorando suas habilidades de programação.

Um abraço e bons estudos.