Francisco Chaves

Francisco Chaves

Software Developer. Entusiasta Linux.

© 2020

Modo escuro

Jogo de Adivinha em JavaScript

Javascript jogo de adivinha

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="jogo">
    <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/css?family=Lato:400,400i,700");

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

body {
  font-family: Lato, sans-serif;
  font-size: 20px;
}

.main {
  background-color: #F8F88D;
}

.jogo {
  min-height: 100vh;
}

.jogo, .form{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

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

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

.form button {
  background-color: #FBEFFF;
  cursor: pointer;
  border-radius: 0.3em;
  width: 50%;
}

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

Código JS:

// 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');

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>';
  }
}

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

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

  const chute = document.getElementById('chute').value;

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

  atualizarTentativa(tentativa, ++jogoAdivinha.tentativa);

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

Inscreva-se para novas atualizações