TENTANDO COLOCAR NÚMERO DE CHANCES | JavaScript: validações e reconhecimento de voz

4
respostas

por TIC - CRN6 - FUNCIONARIOS

| 107.4k xp | 39 posts

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

12/12/2022

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

por TIC - CRN6 - FUNCIONARIOS

| 107.4k xp | 39 posts

13/12/2022

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

13/12/2022

Poderia postar o restante do código?

por TIC - CRN6 - FUNCIONARIOS

| 107.4k xp | 39 posts

14/12/2022

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>