Jogo de adivinhação:
Aprenda a desenvolver um divertido jogo de adivinhação com este tutorial passo a passo. Descubra como construir o jogo usando HTML, CSS e JavaScript. Este projeto consiste em um jogo de adivinhação, que a cada jogo um número aleatório é sorteado, o usuário tem 10 tentativas para adivinhar o número correto.
Veja o Jogo de adivinhação em funcionamento neste link. Jogo de adivinhação.
Veja o vídeo no YouTube:
Começando o Tutorial:
1° Passo: Abra seu VS Code, ou qualquer IDE da sua preferência e crie três pastas com os nomes... index.html, style.css e script.js.
Logo em seguida copie o código html abaixo e cole na pasta "index.html".
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jogo de adivinhação</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Jogo de adivinhação</h1>
<p>Adivinhe um número entre 1 e 100</p>
<input type="number" id="guess">
<button onclick="checkGuess()">Enviar palpite</button>
<p id="feedback"></p>
</div>
<script src="script.js"></script>
</body>
</html>
2° Passo: Copie o código abaixo e cole na pasta "style.css".
body {
font-family: Arial, sans-serif;
background-color: gold;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.container {
background-color: white;
padding: 40px;
border-radius: 8px;
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
text-align: center;
width: 320px;
max-width: 90%;
}
input {
width: 80%;
padding: 12px;
font-size: 24px;
margin-bottom: 12px;
}
button {
width: 100%;
padding: 12px;
font-weight: bold;
background-color: blue;
border: 2px solid blue;
color: white;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: white;
color: blue;
}
3° Passo: Copie o código abaixo e cole na pasta "script.js".
let randomNumber = Math.floor(Math.random() * 100) + 1;
let attempts = 10;
function checkGuess() {
attempts--;
const inputElement = document.getElementById("guess");
const feedbackElement = document.getElementById("feedback");
const guess = inputElement.value;
while (attempts > 0) {
if (guess == randomNumber) {
attempts = 0;
feedbackElement.innerHTML = "Parabéns!";
feedbackElement.style.color = "green";
break;
} else if (guess < randomNumber) {
feedbackElement.innerHTML = `Muito baixo! Tente novamente. ${attempts} Tentativas restantes..`;
feedbackElement.style.color = "red";
break;
} else {
feedbackElement.innerHTML = `Muito alto! Tente novamente. ${attempts} Tentativas restantes`;
feedbackElement.style.color = "red";
break;
}
}
if (attempts === 0 && guess != randomNumber) {
feedbackElement.innerHTML =
`Desculpe, você está sem tentativas! O número correto era ${randomNumber}.`;
feedbackElement.style.color = "red";
}
}
As postagens do nosso blog te ajudaram?
Nos ajude a manter o blog no ar!
Faça uma doação para manter o blog funcionando.
60% das doações são no valor de R$ 7,00
Antônio José do Carmo Nascimento
Comentários
Postar um comentário
Obrigado pelo seu feedback!