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() для перезагрузки страницы и перезапуска игры, когда игрок угадывает правильное число.
Также появляется небольшое всплывающее окно, когда вы правильно угадываете число!

Благодарим вас за участие. Вы можете найти живую рабочую демонстрацию прямо здесь — — — — → Здесь ← — — — —