Создание простой игры на JavaScript может быть увлекательным и образовательным процессом. В этом руководстве мы создадим простую игру, где игрок должен угадать число, которое загадал компьютер. Игра будет состоять из следующих этапов:

  • Создание HTML-разметки
  • Добавление стилей с помощью CSS
  • Написание логики игры на JavaScript

Давайте начнем с создания базовой HTML-разметки для нашей игры.

Шаг 1: HTML-разметка

Создайте новый файл с именем index.html и добавьте в него следующий код:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Игра: Угадай число</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Угадай число</h1>
    <p>Я загадал число от 1 до 100. Попробуй угадать!</p>
    <input type="number" id="guess" placeholder="Введите ваше число">
    <button id="submit">Угадать</button>
    <p id="result"></p>
    <script src="script.js"></script>
</body>
</html>

В этом коде мы создали простую веб-страницу с заголовком, текстом, полем для ввода числа и кнопкой для отправки предположения. Также мы подключили файл script.js, который будет содержать логику нашей игры.

Шаг 2: Стилизация с помощью CSS

Теперь давайте добавим немного стилей, чтобы наша игра выглядела лучше. Создайте файл styles.css и добавьте в него следующий код:

body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin-top: 50px;
}

input {
    padding: 10px;
    font-size: 16px;
    margin: 10px;
}

button {
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
}

#result {
    font-size: 20px;
    margin-top: 20px;
}

Эти стили сделают нашу страницу более привлекательной. Теперь у нас есть базовая структура игры и немного стилей.

Шаг 3: Логика игры на JavaScript

Теперь давайте добавим логику игры. Откройте файл script.js и добавьте следующий код:

const randomNumber = Math.floor(Math.random() * 100) + 1;
const resultDisplay = document.getElementById('result');
const submitButton = document.getElementById('submit');

submitButton.addEventListener('click', function() {
    const userGuess = Number(document.getElementById('guess').value);
    if (userGuess === randomNumber) {
        resultDisplay.textContent = 'Поздравляю! Вы угадали число!';
    } else if (userGuess < randomNumber) {
        resultDisplay.textContent = 'Слишком низко! Попробуйте еще раз.';
    } else {
        resultDisplay.textContent = 'Слишком высоко! Попробуйте еще раз.';
    }
});

В этом коде мы генерируем случайное число от 1 до 100 и добавляем обработчик события на кнопку. Когда пользователь нажимает кнопку, программа проверяет, совпадает ли введенное число с загаданным. В зависимости от результата, выводится соответствующее сообщение.

Шаг 4: Запуск игры

Теперь, когда у нас есть все необходимые файлы, мы можем запустить нашу игру. Просто откройте файл index.html в веб-браузере, и вы увидите свою игру.

Поздравляю! Вы создали свою первую игру на JavaScript. Это базовая версия игры, и вы можете улучшать ее, добавляя новые функции, такие как счетчик попыток, возможность играть снова и так далее.

Заключение

Создание игр на JavaScript — это отличный способ улучшить свои навыки программирования. Вы можете экспериментировать с различными концепциями и делать игры более сложными и интересными. Не бойтесь пробовать что-то новое и развивать свои идеи!