Entrar Ainda não tem acesso?
4
respostas

TENTANDO COLOCAR NÚMERO DE CHANCES

Referente ao curso JavaScript: validações e reconhecimento de voz, no capítulo Criando a lógica do jogo e atividade Projeto da aula anterior

por TIC - CRN6 - FUNCIONARIOS
| 116.2k xp | 39 posts
TI

Estou tentando implementar no projeto um número de limite de chances para o usuário, já fiz de algumas formas, inclusive como está no código abaixo mas não consegui... alguém pode me ajudar ?


const elementoChance = document.getElementById('chance')
const tentativa = 1
const chances = 3


function verificaChute(chute) {
    const numero = +chute     // O sinal de + transforma o chute de string para um número iteiro.

    if (seNumeroInvalido(numero)) {     // Verifica se o que o usuário chutou é de fato um número.
        elementoChute.innerHTML += '<div>Valor não é número</div>' // chute do usuário concatenado com a div da mensagem.
    }

    if (maiorOuMenor(numero)) { // Verifica se o chute do usuário está entre o menor e maior valor definido no jogo.
        elementoChute.innerHTML += `<div> Valor inválido: Fale um número entre ${menorValor} e ${maiorValor}</div>`
    }

        // Se o chute for igual ao número secreto, informa ao usuário e revela o número. Também insere um botão na tela para que o usuário possa reiniciar o jogo.
    if (numero === numeroSecreto && tentativas < chances) { 
        document.body.innerHTML = `
        <h2>Você acertou!</h2>
        <h3>O Número secreto era ${numeroSecreto}</h3>
        <button id="reiniciar" class="btn-reiniciar">Reiniciar</button>
        `

    }else if (numero > numeroSecreto && tentativa < chances) { // Dica informando ao usuário que o número é "menor" em relação ao informado.
        elementoChute.innerHTML += `
        <div>O número secreto é menor <i class="fa-solid fa-arrow-down-long"></i></div>
        `

    }else {  // Dica informando ao usuário que o número é "maior" em relação ao informado.
        elementoChute.innerHTML += `
        <div>O número secreto é maior <i class="fa-solid fa-arrow-up-long"></i></div>
        `
    }
    tentativa++
    elementoChance.innerHTML = chances
}
4 respostas
por José Augusto Oliveira Da Costa Moreira
| 54.1k xp | 9 posts

Amigo, talvez o único problema seja que você declarou "tentativa" e depois usou "tentativas" (no plural).

por TIC - CRN6 - FUNCIONARIOS
| 116.2k xp | 39 posts
TI

Verdade José, realmente teve um erro na hora da transcrição aqui no forum, já corrigi mas infelizmente no código continua não rodando.

por José Augusto Oliveira Da Costa Moreira
| 54.1k xp | 9 posts

Poderia postar o restante do código?

por TIC - CRN6 - FUNCIONARIOS
| 116.2k xp | 39 posts
TI

Já estou tentado fazer de outra forma para ver se funciona mas até agora sem sucesso, consigo até exibir a caixa com o número de chances na tela no momento que é recebito o chute pelo comando de voz, porém ainda não encontrei uma forma de atualizar as chances disponíveis, tipo inicia com 3 chances, após o primeiro chute sem sucesso, atualiza para 2 e assim por diante até zerar e com isso ser exibida na tela a mensagem "GAME OVER". Essa seria a forma mais interessante para concluir o jogo.

segue o código onde criei a função que exibe as chances na tela.

const elementoChute = document.getElementById('chute') // Pegando a DIV com o Id 'chute'
const elementoChance = document.getElementById('chance')
const atualizaChance = document.getElementById('chance')



//Consumindo a API de reconhecimento e voz SpeechRecognition assim que a aplicação abrir.
window.SpeechRecognition = window.SpeechRecognition || 
webkitSpeechRecognition;


const recognition = new SpeechRecognition(); // Instância para controlar as informações do SpeechRecognition.
recognition.lang = 'pt-Br' // Reconhecimento de voz configurado com a lingua pt-br
recognition.start() // Iniciando o reconhecimento de voz

// Ao acessar o evento 'result' do SpeechRecognition, será executada a função onSpeak
 recognition.addEventListener('result',onSpeak)





function onSpeak(e) {
    chute = e.results[0] [0].transcript // const chute recebe a transcrição da voz que está na propiedade results.
    exibeChuteNaTela(chute) //função que exibe a palavra falada pelo usuário (voz) na tela.
    exibeChanceNaTela(chance)
    verificaChute(chute)



}

//Função que exibe na tela a DIV, junto como <span> onde está a palavra falada pelo usuário (voz).
//Obs: usando a crase (``) para exibir os elementos (div e span) na tela e ${} para trazer a const (chute) dentro do span.
function exibeChuteNaTela(chute) {
    elementoChute.innerHTML = ` 
        <div>Você disse</div>
        <span class="box">${chute}</span>
    ` 
}

// Quando a função acabar (ou seja, no evento 'end'), automaticamente será reiniciado o recohecimento de voz.
recognition.addEventListener('end', () => recognition.start())


function exibeChanceNaTela(chance) {
    elementoChance.innerHTML = `
        <div>Chances:</div>
        <span class="caixaChance">${chance}</span>

    `
}

HTML

<!DOCTYPE html>
<html lang="pt-Br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" integrity="sha512-NmLkDIU1C/C88wi324HBc+S2kLhi08PN5GDeUVVVC/BVt/9Izdsc9SVeVfA1UZbY3sHUlDSyRXhCzHfr6hmPPw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
    <title>Numero Secreto</title>
</head>
<body>

    <h1>Acerte o número secreto</h1>

    <h3>O Número secreto está entre <span id="menor-valor">0</span> e <span id="maior-valor">100</span></h3>

    <!-- Obs: Linhas comentadas usando o atalho: control + k + c para ocultar a div e span -->
    <div id="chute" class="mensagem">
        <!-- <div>Você disse:</div>
        <span class="box">20</span>
        <div>O número secreto é maior <i class="fa-solid fa-arrow-up-long"></i></div> -->
    </div>
    <div id="chance">
        <!-- <div>Chances:</div>
        <span class="caixaChance">3</span>  -->
    </div>
    <script src="app/sortearNumero.js"></script>
    <script src="app/voz.js"></script>
    <script src="app/validacao.js"></script>
</body>
</html>