1
resposta

[Sugestão] Mudei um pouco o código da aula.

Para deixar o jogo melhor, pensando na Experiência do Usuário. No HTML no botão "chutar" eu inclui o id="chutar" e o atributo disabled. Ja no .js na 5 linha eu removi o atributo "disabled". Destro da function verificarChute() em caso de acerto eu habilitei o atributo "disabled", para que caso o usuário acerte o número secreto o botão chutar fique desabilitado, e o botão novo jogo fique então habilitado.

Na function reiniciarJogo(), eu novamente removi o atributo "disabled", fazendo com que o botão chutar fique novamente habilitado e o botão novo jogo desabilitado.

<button onclick="verificarChute()" class="container__botao" id="chutar" disabled>Chutar</button>
let listaDeNumerosSoreteados = [];
let numeroLlimite = 10;
let numeroSecreto = gerarNumeroAleatorio();
let tentativas = 1;
document.getElementById("chutar").removeAttribute("disabled");

function exibirTextoNaTela(tag, texto) {
  let campo = document.querySelector(tag);
  campo.innerHTML = texto;
}
function exibirMensagemNaTela() {
  exibirTextoNaTela("h1", "Jogo do Número Secreto");
  exibirTextoNaTela("p", "Escolha um número entre 1 e 10");
}

exibirMensagemNaTela();

function verificarChute() {
  let chute = document.querySelector("input").value;
  if (chute == numeroSecreto) {
    exibirTextoNaTela("h1", "Acertou");
    let palavreTentativa = tentativas > 1 ? "tentativas" : "tentativa";
    let mensagemTentativas = `Parabéns, você acertou! Com ${tentativas} ${palavreTentativa}`;
    exibirTextoNaTela("p", `${mensagemTentativas}`);
    document.getElementById("chutar").setAttribute("disabled", true);
    document.getElementById("reiniciar").removeAttribute("disabled");
  } else {
    if (chute > numeroSecreto) {
      exibirTextoNaTela("p", "O número secreto é menor que " + chute);
    } else {
      exibirTextoNaTela("p", "O número secreto é maior que " + chute);
    }
    tentativas++;
    limparCampo();
  }
}

function gerarNumeroAleatorio() {
  let numeroEscolhido = parseInt(Math.random() * numeroLlimite + 1);
  let quantidadeDeElementosNaLista = listaDeNumerosSoreteados.length;

  if (quantidadeDeElementosNaLista == 10) {
    listaDeNumerosSoreteados = [];
  }

  if (listaDeNumerosSoreteados.includes(numeroEscolhido)) {
    return gerarNumeroAleatorio();
  } else {
    listaDeNumerosSoreteados.push(numeroEscolhido);
    return numeroEscolhido;
  }
}
function limparCampo() {
  chute = document.querySelector("input");
  chute.value = "";
}

function reiniciarJogo() {
  numeroSecreto = gerarNumeroAleatorio();
  limparCampo();
  tentativas = 1;
  exibirMensagemNaTela();
  document.getElementById("reiniciar").setAttribute("disabled", true);
  document.getElementById("chutar").removeAttribute("disabled");
}

1 resposta

Oi Saulo,

Parabéns pela iniciativa de modificar o código do projeto! 👍

Sua sugestão de desabilitar o botão "Chutar" após o acerto é excelente para a experiência do usuário.

Isso evita cliques desnecessários após o jogador já ter acertado o número secreto.

E habilitar novamente no "Novo jogo" mantém o fluxo claro e intuitivo.

Essa manipulação de atributos disabled em botões é uma ótima prática para controlar a interatividade na página.

🎓 Para saber mais: Atributo disabled em HTML.

Continue explorando e compartilhando suas ideias! 🥳