Introdução
Você já imaginou criar um jogo de adivinhação em JavaScript? Pois bem, trago um tutorial completo para te ensinar a fazer isso, na prática.
O JavaScript é uma das linguagens de programação mais utilizadas no mundo, principalmente no desenvolvimento de aplicações web. Além disso, o JavaScript é uma linguagem de programação bastante versátil, permitindo a criação de diversos tipos de projetos. Neste artigo, vamos mostrar como é possível criar um jogo de adivinhação com JavaScript.
Como funciona o jogo
O jogo de adivinhação em JavaScript criado pelo site https://bcbrito.com.br é muito simples e intuitivo. O objetivo do jogo é acertar o número escolhido pelo computador, que é gerado aleatoriamente. O jogador tem três tentativas para acertar o número escolhido. Caso o jogador acerte o número, o jogo exibe uma mensagem de parabéns. Caso o jogador não acerte o número em três tentativas, o jogo exibe uma mensagem de que o jogador perdeu.
Benefícios de jogar
O jogo de adivinhação em JavaScript do site https://bcbrito.com.br é uma ótima forma de praticar a lógica de programação e a sintaxe da linguagem JavaScript. Além disso, o jogo ajuda a desenvolver habilidades como a paciência, a persistência e a concentração. É uma maneira divertida de aprender e aprimorar habilidades que podem ser utilizadas em diversas áreas da vida.
Ao praticar a lógica de programação, o jogador estará desenvolvendo a capacidade de pensar de forma mais estruturada e organizada, o que pode ser aplicado em diversas áreas da vida, como nos estudos, no trabalho e nas relações pessoais. Além disso, a prática da programação ajuda a desenvolver a criatividade e a capacidade de resolver problemas de forma eficiente.
Estrutura do jogo
Vamos imaginar que o seu chefe te deu as seguintes diretrizes para criar este jogo:
Quero que você crie um jogo simples do tipo adivinhe um número. Ele deve gerar um número aleatório de 1 a 100, depois desafiar o jogador a adivinhar o número em 10 rodadas. A cada rodada deve ser dito ao jogador se ele está certo ou errado, se estiver errado, deve ser dito se o palpite é muito baixo ou muito alto. Também deve ser mostrado ao jogador os números que ele tentou adivinhar anteriormente. O jogo termina se o jogador acertar o número ou acabarem os números de tentativas. Quando o jogo acabar, deve ser dado ao jogador a opção de jogar novamente.
Olhando para o enunciado, a primeira coisa que devemos fazer é quebrá-lo em pequenas tarefas, da forma mais parecida com o pensamento de um programador quanto possível:
- Gerar um número aleatório entre 1 e 100.
- Gravar o número do turno que o jogador está. Iniciar em 1.
- Dar ao jogador uma forma de adivinhar o número.
- Após a tentativa ter sido submetida, primeiro gravar em algum lugar para que o usuário possa ver as tentativas anteriores.
- Depois, verificar se o palpite está correto.
- Se estiver correto:
- Escrever mensagem de parabéns.
- Impedir que o jogador insira mais respostas (isso pode bugar o jogo).
- Mostrar controle que permita ao jogador reiniciar o jogo.
- Se o palpite estiver errado e o jogador ainda tem turnos sobrando:
- Dizer ao jogador que ele está errado.
- Permitir que ele insira outra resposta.
- Incrementar o número do turno em 1.
- Se o jogador está errado mas não tem turnos sobrando:
- Dizer ao jogador que o jogo acabou.
- Impedir que o jogador insira mais respostas (isso pode bugar o jogo).
- Mostrar controle que permita ao jogador reiniciar o jogo.
- Quando reiniciar, tenha certeza de resetar todas as variáveis e a interface do jogo, então volte para o passo 1.
Então vamos em frente, olhando como podemos transformar esses passos em código, construindo esse exemplo e explorando as ferramentas do JavaScript ao longo do caminho.
O jogo de adivinhação em JavaScript criado por Bruno Brito é bem simples, mas eficiente. O programa gera um número aleatório entre 1 e 100, e o usuário deve tentar adivinhar qual é esse número. A cada tentativa, o programa informa se o número digitado é maior ou menor que o número gerado aleatoriamente. Quando o usuário acerta o número, o programa exibe uma mensagem de parabéns e a quantidade de tentativas que foram necessárias para acertar.
Lógica do jogo
Para criar o jogo de adivinhação em JavaScript, Bruno Brito utilizou a lógica de programação condicional. A cada tentativa do usuário, o programa verifica se o número digitado é maior ou menor que o número gerado aleatoriamente. A partir disso, o programa informa ao usuário se ele está mais perto ou mais longe de acertar o número.
Aprendizado prático
A prática é essencial para qualquer pessoa que deseja se tornar um bom programador. Por meio da prática, é possível aprimorar habilidades, aprender novas técnicas e estar sempre atualizado com as novidades do mercado. Além disso, a prática ajuda a desenvolver a confiança e a autoestima, pois o programador se sente seguro em sua capacidade de resolver problemas e criar soluções.
O tutorial é uma excelente forma de praticar os conhecimentos em JavaScript. Além de ensinar a criar um jogo simples, ele apresenta uma série de conceitos importantes, como a geração de números aleatórios e a lógica condicional. Com esses conhecimentos, você pode criar jogos mais complexos e outras aplicações que utilizem essas mesmas técnicas.
Código
<html>
<head>
<meta charset="utf-8" />
<title>Jogo Adivinhe um número</title>
<style>
/* Aqui vai o CSS*/
html {
font-family: sans-serif;
}
body {
width: 50%;
max-width: 800px;
min-width: 480px;
margin: 100 auto;
}
.form input[type="number"] {
width: 200px;
}
.ultimoResultado {
color: white;
padding: 3px;
}
</style>
</head>
<body>
<h1>Jogo Adivinhe um número</h1>
<p>
Selecionamos um número aleatório entre 1 e 100. Veja se consegue adivinhar
em 10 chances ou menos. Nós lhe diremos se seu palpite está com valor alto
ou baixo.
</p>
<div class="form">
<label for="campoPalpite">Digite seu palpite: </label>
<input type="number" min="1" max="100" required id="campoPalpite" class="campoPalpite" />
<input type="submit" value="Enviar" class="enviarPalpite" />
</div>
<div class="resultParas">
<p class="palpites"></p>
<p class="ultimoResultado"></p>
<p class="baixoOuAlto"></p>
</div>
<script>
// Aqui que vc coloca seu código JavaScript
// Declaração das variáveis
let numeroAleatorio = Math.floor(Math.random() * 100) + 1;
const palpites = document.querySelector(".palpites");
const ultimoResultado = document.querySelector(".ultimoResultado");
const baixoOuAlto = document.querySelector(".baixoOuAlto");
const enviarPalpite = document.querySelector(".enviarPalpite");
const campoPalpite = document.querySelector(".campoPalpite");
let contadorPalpite = 1;
let resetarBotao;
enviarPalpite.addEventListener("click", checarPalpite);
function checarPalpite() {
const palpiteUsuario = Number(campoPalpite.value);
if (contadorPalpite === 1) {
palpites.textContent = "Palpites anteriores: ";
}
palpites.textContent += palpiteUsuario + " ";
if (palpiteUsuario === numeroAleatorio) {
ultimoResultado.textContent = "Parabéns! Você acertou!";
ultimoResultado.style.backgroundColor = "green";
baixoOuAlto.textContent = "";
setGameOver();
} else if (contadorPalpite === 10) {
ultimoResultado.textContent = "!!!GAME OVER!!!";
baixoOuAlto.textContent = "";
setGameOver();
} else {
ultimoResultado.textContent = "Errado!";
ultimoResultado.style.backgroundColor = "red";
if (palpiteUsuario < numeroAleatorio) {
baixoOuAlto.textContent = "O último palpite foi muito baixo!";
} else if (palpiteUsuario > numeroAleatorio) {
baixoOuAlto.textContent = "O último palpite foi muito alto!";
}
}
contadorPalpite++;
campoPalpite.value = "";
campoPalpite.focus();
}
function setGameOver() {
campoPalpite.disabled = true;
enviarPalpite.disabled = true;
resetarBotao = document.createElement("button");
resetarBotao.textContent = "Começar novo jogo";
document.body.appendChild(resetarBotao);
resetarBotao.addEventListener("click", resetGame);
}
function resetGame() {
contadorPalpite = 1;
const resetParas = document.querySelectorAll(".resultParas p");
for (const resetPara of resetParas) {
resetPara.textContent = "";
}
resetarBotao.parentNode.removeChild(resetarBotao);
campoPalpite.disabled = false;
enviarPalpite.disabled = false;
campoPalpite.value = "";
campoPalpite.focus();
ultimoResultado.style.backgroundColor = "white";
numeroAleatorio = Math.floor(Math.random() * 100) + 1;
}
</script>
</body>
</html>GitHub
Resultado Obtido:
Conclusão
Neste artigo, vimos como é possível criar um jogo de adivinhação com JavaScript. O jogo de adivinhação em JavaScript do site https://bcbrito.com.br é uma excelente forma de praticar a programação e aprimorar habilidades importantes, como a lógica de programação e a paciência. Além disso, o jogo pode ser personalizado de acordo com as necessidades do jogador, tornando-o ainda mais interessante e desafiador. Aproveite essa oportunidade para praticar e se divertir ao mesmo tempo!
A prática da programação é uma atividade que pode trazer muitos benefícios para a vida de qualquer pessoa, independentemente de sua área de atuação. Aprender a programar é uma excelente forma de desenvolver habilidades importantes, como a lógica de programação, a paciência e a persistência. Além disso, a programação oferece inúmeras possibilidades de carreira e pode ser utilizada para solucionar problemas em diversas áreas, desde a medicina até a indústria.
Por isso, se você quer aprender a programar ou aprimorar suas habilidades, não deixe de experimentar o jogo de adivinhação em JavaScript do site https://bcbrito.com.br. É uma forma divertida e eficiente de colocar em prática os conhecimentos adquiridos e desenvolver habilidades valiosas para o mercado de trabalho. Aproveite essa oportunidade e comece a jogar agora mesmo!
