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