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.
Clique para visualizar o 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>
Clique para visualizar o 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);
}
Clique para visualizar o 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';
}
});
