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;
}