HTML и JavaScript игра в угадывание чисел
Простая игра на HTML и JavaScript, в которую можно играть в браузере.
Этот код использует функцию Math.random()
для генерации случайного числа от 1 до 100, которое хранится в переменной target
. Затем он получает поле ввода и кнопку из HTML-документа с помощью функции getElementById()
. К кнопке добавляется прослушиватель событий для прослушивания кликов, а событие click
обрабатывается функцией обратного вызова, которая получает предположение из поля ввода и проверяет его правильность. Если догадка верна, отображается сообщение, указывающее, что игрок выиграл. Если предположение слишком высокое или слишком низкое, отображается сообщение, указывающее, что игрок должен повторить попытку.
<!-- index.html --> <html> <head> <title>Guess the Number</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Guess the Number</h1> <p>I'm thinking of a number between 1 and 100. Can you guess what it is?</p> <p>Enter your guess:</p> <input id="guess" type="text"> <button id="submit">Guess</button> <p id="result"></p> <script src="game.js"></script> </body> </html>
Чтобы игра HTML и JavaScript выглядела более красиво, вы можете использовать CSS для стилизации элементов игры. Вот пример того, как добавить CSS в игру, чтобы придать ей более современный и профессиональный вид:
/* style.css */ body { font-family: sans-serif; text-align: center; } h1 { color: #00b8d4; } input[type="text"] { border: 1px solid #ccc; border-radius: 4px; padding: 8px; font-size: 16px; } button { background-color: #00b8d4; color: white; border: none; border-radius: 4px; padding: 8px 16px; font-size: 16px; cursor: pointer; } button:hover { background-color: #0095c6; } #result { color: #333; font-size: 20px; margin-top: 16px; }
Этот код CSS определяет стили для тела, заголовка, поля ввода, кнопки и элементов результирующего абзаца игры. Он устанавливает семейство шрифтов для основного текста, выравнивает текст по центру и оформляет заголовок синим цветом. Он также стилизует поле ввода с рамкой, радиусом границы, отступом и размером шрифта, а также стилизует кнопку с синим цветом фона, белым текстом, радиусом границы, отступом, размером шрифта и курсором. Кнопка также имеет эффект наведения, который меняет цвет фона на немного более темный оттенок синего, когда указатель мыши находится над ней. Наконец, результирующий абзац имеет серый цвет, увеличенный размер шрифта и верхнее поле.
Время для Jvascript:
Этот код использует функцию Math.random()
для генерации случайного числа от 1 до 100, которое хранится в переменной target
. Затем он получает поле ввода и кнопку из HTML-документа с помощью функции getElementById()
. К кнопке добавляется прослушиватель событий для прослушивания кликов, а событие click
обрабатывается функцией обратного вызова, которая получает предположение из поля ввода и проверяет его правильность. Если догадка верна, отображается сообщение, указывающее, что игрок выиграл. Если предположение слишком высокое или слишком низкое, отображается сообщение, указывающее, что игрок должен повторить попытку.
Чтобы играть в игру, вы можете открыть файл index.html
в браузере и ввести:
// game.js // Generate a random number between 1 and 100 const target = Math.floor(Math.random() * 100) + 1; // Get the input field and button from the HTML document const guessInput = document.getElementById("guess"); const submitButton = document.getElementById("submit"); // Add an event listener to the input field to listen for the Enter key guessInput.addEventListener("keydown", function(event) { // Check if the Enter key was pressed if (event.key === "Enter") { // Get the guess from the input field const guess = parseInt(guessInput.value, 10); // Check if the guess is correct if (guess === target) { alert("Congratulations! You guessed it!"); location.reload(); // Reload the page to restart the game } else if (guess > target) { document.getElementById("result").innerHTML = "Your guess was too high. Try a lower number."; } else { document.getElementById("result").innerHTML = "Your guess was too low. Try a higher number."; } } }); // Add an event listener to the button to listen for clicks submitButton.addEventListener("click", function() { // Get the guess from the input field const guess = parseInt(guessInput.value, 10); // Check if the guess is correct if (guess === target) { alert("Congratulations! You guessed it!"); location.reload(); // Reload the page to restart the game } else if (guess > target) { document.getElementById("result").innerHTML = "Your guess was too high. Try a lower number."; } else { document.getElementById("result").innerHTML = "Your guess was too low. Try a higher number."; } });
Эта версия кода добавляет прослушиватель событий в поле ввода для прослушивания события keydown
. Слушатель событий проверяет, была ли нажата клавиша Enter, и, если да, получает предположение из поля ввода и проверяет его правильность. Также этот код использует функцию location.reload()
для перезагрузки страницы и перезапуска игры, когда игрок угадывает правильное число.
Также появляется небольшое всплывающее окно, когда вы правильно угадываете число!
Благодарим вас за участие. Вы можете найти живую рабочую демонстрацию прямо здесь — — — — → Здесь ← — — — —