Javascript игра «Угадай число»
В падающем самолёте нет атеистов.
13-ноября-2023, 21:53 32 0
В этом уроке мы рассмотрим, как создать игру «Угадай число». Для создания этого проекта нам нужны HTML, CSS и jаvascript.
HTML:
Начнем с HTML-кода. Скопируйте приведенный ниже код и вставьте его в свой HTML-документ.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Guess The Number Game</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div id="game">
<h3>
I am thinking of a number between 1-100.<br />
Can you guess it?
</h3>
<div class="input-wrapper">
<input type="number" placeholder="00" id="guess" />
<button id="check-btn">Guess</button>
</div>
<p id="no-of-guesses">No. Of Guesses: 0</p>
<p id="guessed-nums">Guessed Numbers are: None</p>
</div>
<button id="restart">Restart</button>
<div class="result">
<div id="hint"></div>
</div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>CSS:
Далее мы стилизуем нашу игру с помощью CSS. Для этого скопируйте код, предоставленный вам ниже, и вставьте его в свою таблицу стилей.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #3c6fff;
}
.container {
width: min(90%, 31.25em);
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
background-color: #ffffff;
padding: 4em 2em;
border-radius: 0.5em;
box-shadow: -1.5em -1.5em #202020;
text-align: center;
}
h3 {
font-size: 1.2em;
font-weight: 500;
line-height: 2em;
color: #303030;
}
.input-wrapper {
width: 70%;
display: grid;
grid-template-columns: 2fr 3fr;
gap: 1em;
margin: 3em auto 1.5em auto;
}
input[type="number"] {
width: 100%;
padding: 1em;
font-size: 1.2em;
text-align: center;
border: 2px solid #adaeae;
border-radius: 0.3em;
outline: none;
appearance: text-field;
-moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"]:focus {
border-color: #3c6fff;
}
button {
font-size: 1em;
background-color: #3c6fff;
color: #ffffff;
border: none;
outline: none;
border-radius: 0.5em;
font-weight: 500;
cursor: pointer;
}
#restart {
margin: 0 auto 0 auto;
padding: 0.8em 1em;
display: none;
}
.result {
margin-top: 1em;
}
p {
font-size: 1em;
font-weight: 400;
color: #565b70;
word-break: break-all;
}
.error,
.success {
padding: 0.5em 0;
border-radius: 0.3em;
margin-bottom: 1em;
animation: pop 0.4s forwards;
transform: scale(0);
}
.error {
background-color: #ffcbcb;
color: #ff3e3e;
}
.success {
background-color: #b9ffd5;
color: #05c451;
}
@keyframes pop {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}jаvascript:
Наконец, мы добавляем функциональность с помощью jаvascript. Cкопируйте приведенный ниже код и вставьте его в файл сценария.
Во-первых, мы начнем со ссылок на элементы HTML. Когда окно загружается, мы вызываем функцию «init», которая устанавливает случайное число и инициализирует счетчик количества догадок и массив для хранения догадок, которые затем отображаются на нашей веб-странице. Когда пользователь нажимает кнопку проверки или если пользователь нажимает клавишу «Ввод», мы вызываем функцию «воспроизведение», которая сначала проверяет недопустимый ввод, затем добавляет предположение в массив догадок и увеличивает счетчик предположений. Далее мы проверяем, равна ли догадка пользователя ответу или нет. Если нет, мы проверяем, является ли предположение высоким или низким, и отображаем соответствующее сообщение с количеством предположений и предположением. Если ответ аналогичен решению, мы отображаем сообщение о победе и прекращаем выполнение. Наконец, мы определяем функцию для кнопки «Перезапустить», позволяющую перезапустить игру.
const hint = document.getElementById("hint");
const noOfGuessesRef = document.getElementById("no-of-guesses");
const guessedNumsRef = document.getElementById("guessed-nums");
const restartButton = document.getElementById("restart");
const game = document.getElementById("game");
const guessInput = document.getElementById("guess");
const checkButton = document.getElementById("check-btn");
let answer, noOfGuesses, guessedNumsArr;
const play = () => {
const userGuess = guessInput.value;
if (userGuess < 1 || userGuess > 100 || isNaN(userGuess)) {
alert("Please enter a valid number between 1 and 100.");
return;
}
guessedNumsArr.push(userGuess);
noOfGuesses += 1;
if (userGuess != answer) {
if (userGuess < answer) {
hint.innerHTML = "Too low. Try Again!";
} else {
hint.innerHTML = "Too high. Try Again!";
}
noOfGuessesRef.innerHTML = `<span>No. Of Guesses:</span> ${noOfGuesses}`;
guessedNumsRef.innerHTML = `<span>Guessed Numbers are: </span>${guessedNumsArr.join(
","
)}`;
hint.classList.remove("error");
setTimeout(() => {
hint.classList.add("error");
}, 10);
} else {
hint.innerHTML = `Congratulations!<br>The number was <span>${answer}</span>.<br>You guessed the number in <span>${noOfGuesses} </span>tries.`;
hint.classList.add("success");
game.style.display = "none";
restartButton.style.display = "block";
}
};
const init = () => {
console.log("Game Started");
answer = Math.floor(Math.random() * 100) + 1;
console.log(answer);
noOfGuesses = 0;
guessedNumsArr = [];
noOfGuessesRef.innerHTML = "No. Of Guesses: 0";
guessedNumsRef.innerHTML = "Guessed Numbers are: None";
guessInput.value = "";
hint.classList.remove("success", "error");
};
guessInput.addEventListener("keydown", (event) => {
if (event.keyCode === 13) {
event.preventDefault();
play();
}
});
restartButton.addEventListener("click", () => {
game.style.display = "grid";
restartButton.style.display = "none";
hint.innerHTML = "";
hint.classList.remove("success");
init();
});
checkButton.addEventListener("click", play);
window.addEventListener("load", init);
