Solucionado (ver solução)
Solucionado
(ver solução)
8
respostas

[Dúvida] Botão reiniciar jogo

!estrutura do código bom dia, eu estou em "Lógica de Programação: explore funções e listas" na aula "reiniciando jogo" e estou tendo problemas na hora de tirar o atributo de "novo jogo", eu já assisti essa aula quatro vezes e arrumei o código, mas o problema persiste.

8 respostas

Olá, Kauã.

Tudo bem?

Eu não entendi a sua dúvida ao certo. Poderia fornecer mais detalhes do código, e qual o problema que esta ocorrendo. Compartilha os códigos HTML, CSS e JavaScript completos, sem ser print, você pode colar eles aqui mesmo, assim consigo testar e apresentar uma resposta mais assertiva.

Fico aguardando. Qualquer dúvida manda aqui. Valeu.

function reiniciarJogo() {
    numeroSecreto = gerarNumeroAleatorio();
    limparCampo();
    tentativas = 1;
    exibirMensagemInicial();
    document.getElementById('reiniciar').setAttribute('disabled', true);
}

Oii Kauã

Esse trecho de código que você compartilhou, parece estar correto, precisaria ver o restante do código.

Verifica se você adicionou essa linha de código document.getElementById('reiniciar').removeAttribute('disabled'); no final do primeiro if dentro da função verificarChute.

Depois precisa implementar a função reiniciarJogo, que no caso a sua parece estar correta, veja:

function reiniciarJogo() {
    numeroSecreto = gerarNumeroAleatorio();
    limparCampo();
    tentativas = 1;
    exibirMensagemInicial();
    document.getElementById('reiniciar').setAttribute('disabled', true)
}

Vou deixar o JavaScript completo dessa aula de "Reiniciar o jogo":

let numeroSecreto = gerarNumeroAleatorio();
let tentativas = 1;

function exibirTextoNaTela(tag, texto) {
    let campo = document.querySelector(tag);
    campo.innerHTML = texto;
}

function exibirMensagemInicial() {
    exibirTextoNaTela('h1', 'Jogo do número secreto');
    exibirTextoNaTela('p', 'Escolha um número entre 1 e 10');
}

exibirMensagemInicial();

function verificarChute() {
    let chute = document.querySelector('input').value;
    
    if (chute == numeroSecreto) {
        exibirTextoNaTela('h1', 'Acertou!');
        let palavraTentativa = tentativas > 1 ? 'tentativas' : 'tentativa';
        let mensagemTentativas = `Você descobriu o número secreto com ${tentativas} ${palavraTentativa}!`;
        exibirTextoNaTela('p', mensagemTentativas);
        document.getElementById('reiniciar').removeAttribute('disabled');
    } else {
        if (chute > numeroSecreto) {
            exibirTextoNaTela('p', 'O número secreto é menor');
        } else {
            exibirTextoNaTela('p', 'O número secreto é maior');
        }
        tentativas++;
        limparCampo();
    }
}

function gerarNumeroAleatorio() {
    return parseInt(Math.random() * 3 + 1);
}

function limparCampo() {
    chute = document.querySelector('input');
    chute.value = '';
}

function reiniciarJogo() {
    numeroSecreto = gerarNumeroAleatorio();
    limparCampo();
    tentativas = 1;
    exibirMensagemInicial();
    document.getElementById('reiniciar').setAttribute('disabled', true)
}

Olá, Renan Eu copiei e verifiquei a linha de código que você me enviou, mas não deu certo.

Opa. Kauã.

Como eu disse antes, você compartilhou só um trechinho de código, mas eu preciso dos códigos completos para poder dar uma resposta mais assertiva, pode colar cada um deles aqui, o código do arquivo HTML, o JavaScript e o CSS. Assim consigo testar.

Olá, Renan Aqui estão os códigos HTML

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.responsivevoice.org/responsivevoice.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@700&family=Inter:wght@400;700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>JS Game</title>
</head>

<body>

    <div class="container">
        <div class="container__conteudo">
            <div class="container__informacoes">
                <div class="container__texto">
                    <h1></h1>
                    <p class="texto__paragrafo"></p>
                </div>
                <input type="number" min="1" max="10" class="container__input">
                <div class="chute container__botoes">
                    <button onclick="verificarChute()" class="container__botao">Chutar</button>
                    <button onclick="reiniciarJogo()" id="reiniciar" class="container__botao" disabled>Novo jogo</button>
                </div>
            </div>
            <img src="./img/ia.png" alt="Uma pessoa olhando para a esquerda" class="container__imagem-pessoa" />
        </div>
    </div>




    <script src="app.js" defer></script>
</body>

</html>

JAVASCRIPT

let numeroSecreto = gerarNumeroAleatorio();
let tentativas = 1;

function exibirTextoNaTela(tag, texto) {
    let campo = document.querySelector(tag);
    campo.innerHTML = texto;
}

function exibirMensagemInicial() { 
    exibirTextoNaTela('h1', 'Jogo do número secreto'); 
    exibirTextoNaTela('p', 'Escolha um número entre 1 e 10'); I
}

exibirMensagemInicial();

function verificarChute() {
    let chute = document.querySelector('input').value;

    if (chute == numeroSecreto) {
        exibirTextoNaTela('h1', 'Acertou');
        let palavraTentativa = tentativas > 1 ? 'tentativas' : 'tentativa';
        let mensagemTentativas = `Voce descobriu o número secreto com ${tentativas} ${palavraTentativa}!`;
        exibirTextoNaTela('p', mensagemTentativas);
        document.getElementById('reiniciar').removeAttribute('disabled');
    } else {
        if (chute > numeroSecreto) {
            exibirTextoNaTela('p', 'O número secreto é menor');
        } else {
            exibirTextoNaTela('p', 'O número secreto é maior');
        }
        tentativas++;
        limparCampo();
    }


    console.log(chute == numeroSecreto);
}

function gerarNumeroAleatorio() {
    return parseInt(Math.random() * 10 + 1);
}

function limparCampo() {
    chute = document.querySelector('input');
    chute.value = '';
}

function reiniciarJogo() {
    numeroSecreto = gerarNumeroAleatorio();
    limparCampo();
    tentativas = 1;
    exibirMensagemInicial();
    document.getElementById('reiniciar').setAttribute('disabled', true)
}
solução!

Oi, Kauã.

Tem uma letra "i" amais no seu código que está causando um erro, pra mim aparece na linha 11, dentro da função "exibirMensagemInicial", veja:

print do VSCode no código do jogo do número secreto destacando um erro na linha 11 na função exibirMensagemInicial um "i" amais

Outra coisa, adiciona essa linha de código responsiveVoice.speak(texto, 'Brazilian Portuguese Female', {rate:1.2}); a sua função exibirTextoNaTela, ela especifica as características que queremos para a API do responsivevoice, sua função exibirTextoNaTela vai ficar assim:

function exibirTextoNaTela(tag, texto) {
    let campo = document.querySelector(tag);
    campo.innerHTML = texto;
    responsiveVoice.speak(texto, 'Brazilian Portuguese Female', {rate:1.2});
}

De resto está funcionando corretamente, até o botão de reiniciar.

Testa aí, qualquer coisa me avisa. Valeu Kauã~.

Olá, Renan Eu não tinha notado esse erro, agora tá funcionando corretamente. Muito obrigado