Entrar Ainda não tem acesso?
1
resposta

[Projeto] Solução Game Over!

Referente ao curso JavaScript: validações e reconhecimento de voz

por Emanuel Mateus da Conceição Teixeira
| 62.4k xp | 10 posts
Analista de inteligência comercial

Segue o repositório do projeto e meu código de exemplo, bem como o live para experimentar!

Repo: https://github.com/Emanuelmts/numero-secreto-game Projeto live: https://numero-secreto-game-ten.vercel.app/

function verificaSeOChutePossuiUmValorValido(chute) {
    const fundo = document.getElementById('body')
    const numero = parseInt(chute)

    if (chute == 'Game Over.') {
       document.body.innerHTML = `
       <h1>GAME OVER!</h1>

       <h3> Você finalizou o jogo ao dizer isso!</h3>
       <button id="jogar-novamente" class="btn-jogar"><i class="fa-solid fa-arrows-rotate"></i>  Jogar novamente</button>
       `
       fundo.style.backgroundColor = '#ec5353'
    } 

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

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

    if (numero == numeroSecreto) {
        document.body.innerHTML = `
        <h1>Você Acertou!!!!</h1>
        <h3>O número secreto era <span id='numeroCerto'>${numeroSecreto}</span></h3>

        <button id="jogar-novamente" class="btn-jogar"><i class="fa-solid fa-arrows-rotate"></i>  Jogar novamente</button>
        `
    } else if (numero > numeroSecreto) {
        elementoChute.innerHTML += `
        <div>O número secreto é menor <i class="fa-solid fa-circle-arrow-down"></i></div>
        `
    } else {
        elementoChute.innerHTML += `
        <div>O número secreto é maior <i class="fa-solid fa-circle-arrow-up"></i></div>
        `
    }
}
1 resposta
por RODRIGO SILVA HARDER
| 2301.6k xp | 4888 posts
Alura Scuba Team Monitor de Fórum Ops

Oi, Emanuel, tudo bem?

Seu código ficou muito bacana e seu jogo ficou muito legal, adorei o design que você aplicou. Parabéns pelo resultado!

Contudo, tenho uma consideração para fazer com relação à finalização do jogo ao dizer "Game Over". No seu código você colocou o código:

   if (chute == 'Game Over.') {
       document.body.innerHTML = `
       <h1>GAME OVER!</h1>

       <h3> Você finalizou o jogo ao dizer isso!</h3>
       <button id="jogar-novamente" class="btn-jogar"><i class="fa-solid fa-arrows-rotate"></i>  Jogar novamente</button>
       `
       fundo.style.backgroundColor = '#ec5353'
    }

Ao utilizar na condição que chute == 'Game Over.', assume-se que para finalizar o jogo a escrita da palavra feita através do reconhecimento de voz deve ter a primeira letra das palavras "Game" e "Over" maiúsculas, contudo o reconhecimento de voz não consegue realizar a distinção de letras maiúsculas e minusculas, tao menos do ponto final colocado após a palavra "Over", portanto, para que essa condição funcione adequadamente, é necessário que a condição esteja escrita com letras minusculas e sem o ponto final. Ficaria assim:

   if (chute == 'game over') {
       document.body.innerHTML = `
       <h1>GAME OVER!</h1>

       <h3> Você finalizou o jogo ao dizer isso!</h3>
       <button id="jogar-novamente" class="btn-jogar"><i class="fa-solid fa-arrows-rotate"></i>  Jogar novamente</button>
       `
       fundo.style.backgroundColor = '#ec5353'
    }

Continue mergulhando em seus estudos e caso tenha dúvidas, conte com a comunidade do fórum!

Abraços!

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