Francisco Chaves

Francisco Chaves

Software Developer.
Chatbot Developer.

© 2024

Modo escuro

Jogo de Adivinha em JavaScript

Logo

Olá pessoal, hoje criei um programa em JavaScript para saber se vocês são bons de adivinha, eu já acertei na terceira tentativa, agora quero saber quem vai ganhar de mim :)

Visualize o Pen Jogo de Adivinha feito por Francisco Chaves (@franciscochaves) em CodePen.

Deixo o código fonte abaixo para quem quiser utilizar ou melhorar o jogo, fiquem a vontade para compartilhar.

Código HTML:

<!-- HTML -->

<main class="main">
  <section class="game">
    <h1>Jogo de Adivinha</h1>
    <div class="status" id="status">Adivinhe o número sorteado</div>
    <div class="tentativa" id="tentativa">Tentativa: 0</div>
    <form class="form" id="form">
      <label for="chute">Chute um número entre 0 e 100</label>
      <input type="number" name="chute" id="chute" />
      <button id="btnVerifica">Verificar</button>
    </form>
  </section>
</main>

Código CSS:

/* CSS */

@import url('https://fonts.googleapis.com/css2?family=Lekton&family=Rancho&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Lekton', cursive;
  font-size: 20px;
}

h1 {
  font-family: 'Rancho', cursive;
  font-size: 3.5rem;
  font-weight: 400;
}

.main {
  min-height: 100vh;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.game {
  box-shadow: 10px 5px 15px black;
}

.game,
form {
  background-color: #fffccc;
  padding: 1.8rem;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.game > div {
  padding: 0.5rem;
}

.form input,
.form label,
.form button {
  margin-top: 1rem;
}

.form input,
.form button {
  font-size: inherit;
  font-family: inherit;
  padding: 0.5rem;
}

.form button {
  cursor: pointer;
}

.form button:hover {
  filter: opacity(0.8);
}

Código JavaScript:

// JS

const jogoAdivinha = {
  semente: 100,
  tentativa: 0,
  numeroSorteado: function geraValorAleatorio() {
    return Math.round(Math.random() * this.semente);
  },
};

const btnVerifica = document.getElementById('btnVerifica');
const status = document.getElementById('status');
const tentativa = document.getElementById('tentativa');
const chute = document.getElementById('chute');

let numeroSorteado = jogoAdivinha.numeroSorteado();

function atualizarTentativa(tentativa, valor) {
  if (valor > 1) {
    tentativa.innerHTML =
      'Tentativas : <span style="color: blue">' + valor + '</span>';
  } else {
    tentativa.innerHTML =
      'Tentativa : <span style="color: blue">' + valor + '</span>';
  }
}

function reiniciar() {
  btnVerifica.innerText = 'Verificar';
  tentativa.innerHTML = 'Tentativa :  0';
  chute.disabled = false;
  chute.value = '';
  jogoAdivinha.tentativa = 0;
  numeroSorteado = jogoAdivinha.numeroSorteado();
  btnVerifica.removeEventListener('click', reiniciar);
}

const formAdivinha = document.getElementById('form');

formAdivinha.addEventListener('submit', function (event) {
  event.preventDefault();

  if (!!chute.value == false) {
    status.innerHTML = '<span style="color:#FF3D00">Digite algum valor</span>';
    return;
  }

  atualizarTentativa(tentativa, ++jogoAdivinha.tentativa);

  if (numeroSorteado == chute.value) {
    status.innerHTML =
      '<span style="color:#00C853">Parabéns, você acertou!!</span>';
    chute.disabled = true;
    btnVerifica.innerText = 'Tentar novamente?';
    btnVerifica.addEventListener('click', reiniciar);
  } else if (numeroSorteado > chute.value) {
    status.innerText = 'O número sorteado é maior';
  } else if (numeroSorteado < chute.value) {
    status.innerText = 'O número sorteado é menor';
  }
});

#Compartilhe

Recomendado para você