Создайте увлекательную веб-игру Whack-a-Mole

Введение

В этом проекте вы научитесь создавать игру "Убей крота" с использованием HTML, CSS и JavaScript. В игре нужно избивать кротов, которые случайно появляются из ям в заданный временной лимит. Вы создадите необходимые файлы HTML, CSS и JavaScript и поэтапно реализуете игровую логику.

👀 Предпросмотр

Игра "Убей крота" для веб-страницы

🎯 Задачи

В этом проекте вы научитесь:

настраивать файлы проекта для игры "Убей крота";
добавлять необходимые стили CSS для создания макета и дизайна игры;
реализовывать игровую логику для появления и исчезновения кротов, подсчета очков и отслеживания времени;
создавать слушатели событий для избивания кротов и запуска игры.

🏆 Достижения

После завершения этого проекта вы сможете:

создавать файлы HTML, CSS и JavaScript для веб-игры;
использовать CSS для стилизации и макетирования игровых элементов;
манипулировать DOM с использованием JavaScript для появления и исчезновения игровых элементов;
обрабатывать взаимодействия пользователя и обновлять состояние игры;
использовать таймеры в JavaScript для отслеживания времени и управления игровым процессом.

Создайте файлы проекта

Сначала создадим файлы проекта для игры "Убей крота".

Перейдите в директорию ~/project с помощью команды cd.
Создайте новый файл под названием index.html.
Скопируйте и вставьте следующий код в index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
    <title>Whack-a-Mole!</title>
  </head>

  <body
    class="bg-gradient-to-r from-yellow-400 via-red-500 to-pink-500 flex items-center justify-center h-screen"
  >
    <div class="game bg-white p-8 rounded-lg shadow-2xl text-center">
      <h1 class="text-4xl font-bold mb-4 text-red-600">Whack-a-Mole!</h1>
      <p class="score text-2xl text-red-600">
        Score: <span id="score">0</span>
      </p>
      <p class="time text-2xl text-red-600">
        Time Left: <span id="time">0</span>
      </p>
      <button
        id="startBtn"
        class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded mt-4 transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110"
      >
        Start Game
      </button>
      <div id="grid" class="grid grid-cols-3 gap-4 mt-4">
        <!-- Holes will be added here -->
      </div>
    </div>
    <script src="main.js"></script>
  </body>
</html>

Добавьте CSS-стили

Создайте новый файл под названием styles.css.
Скопируйте и вставьте следующий код в styles.css:

.game {
  width: 600px;
  border-radius: 2rem;
}

.hole {
  height: 0;
  padding-bottom: 100%;
  position: relative;
  background: #eee;
  border: 3px solid #ccc;
  border-radius: 50%;
  overflow: hidden;
}

.mole {
  width: 100%;
  height: 100%;
  background: #a0522d;
  border-radius: 50%;
  position: absolute;
  transform: translateY(100%);
  transition: transform 0.3s;
}

.mole.up {
  transform: translateY(0);
}

.mole.whacked {
  background: #008cff;
}

#startBtn {
  background-color: #0051ff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

#startBtn:hover {
  background-color: #028a5f;
}

Добавьте игровую логику

Создайте новый файл под названием main.js.
В последующих шагах мы добавим JavaScript-код.

Теперь добавим игровую логику в файл main.js.

Откройте файл main.js.
Скопируйте и вставьте следующий код в main.js:

const grid = document.querySelector("#grid");
const scoreDisplay = document.querySelector("#score");
const timeDisplay = document.querySelector("#time");
const startBtn = document.querySelector("#startBtn");
let holes = [];
let score = 0;
let lastHole;
let timeUp = false;
let gameTimer;
let countdownTimer;
let countdown;

function createHoles() {
  for (let i = 0; i < 6; i++) {
    const hole = document.createElement("div");
    const mole = document.createElement("div");

    hole.classList.add("hole");
    mole.classList.add("mole");

    hole.appendChild(mole);
    grid.appendChild(hole);

    holes.push(hole);
  }
}

function randomTime(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

function randomHole(holes) {
  const idx = Math.floor(Math.random() * holes.length);
  const hole = holes[idx];
  if (hole === lastHole) {
    return randomHole(holes);
  }
  lastHole = hole;
  return hole;
}

function peep() {
  // TODO: Реализуйте эту функцию в шаге 3.
}

function startGame() {
  // TODO: Реализуйте эту функцию в шаге 4.
}

function whack(e) {
  // TODO: Реализуйте эту функцию в шаге 5.
}

createHoles();
// TODO: Реализуйте оставшийся код в шаге 6.

Этот код определяет переменные для хранения ссылок на различные HTML-элементы и инициализирует другие необходимые переменные. Он также определяет несколько функций для создания ям, генерации случайных времени и ям, появления и исчезновения кротов, запуска игры и обработки ударов по кротов. Наконец, он создает ямы, добавляет слушатели событий на ямы и настраивает слушатель события нажатия на кнопку "Старт".

Реализуйте функцию появления кротов

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

Откройте файл main.js.
Найдите функцию peep.
Замените существующий код на следующий:

function peep() {
  const time = randomTime(200, 1000);
  const hole = randomHole(holes);
  hole.querySelector(".mole").classList.add("up");

  setTimeout(() => {
    hole.querySelector(".mole").classList.remove("up");
    hole.querySelector(".mole").classList.remove("whacked");
    if (!timeUp) peep();
  }, time);
}

Эта функция устанавливает случайный интервал времени между 200 миллисекундами и 1000 миллисекундами с использованием функции randomTime. Она выбирает случайную яму с использованием функции randomHole и делает крота видимым, добавляя класс up к элементу крота. После указанного интервала времени крота исчезает, удаляя класс up. Если игра не окончена (timeUp равно false), функция вызывает себя рекурсивно, чтобы сделать появиться другого крота.

Реализуйте функцию startGame

Далее мы реализуем функцию startGame, которая инициализирует игру и запускает таймер.

Откройте файл main.js.
Найдите функцию startGame.
Замените существующий код на следующий:

function startGame() {
  scoreDisplay.textContent = 0;
  timeUp = false;
  score = 0;
  peep();
  gameTimer = setTimeout(() => (timeUp = true), 10000);
  countdown = 10;
  timeDisplay.textContent = countdown;
  startBtn.disabled = true;
  countdownTimer = setInterval(() => {
    countdown--;
    if (countdown < 0) {
      clearInterval(countdownTimer);
      startBtn.disabled = false;
      return;
    }
    timeDisplay.textContent = countdown;
  }, 1000);
}

Эта функция инициализирует счет, устанавливает timeUp в false и сбрасывает отображение счета. Она вызывает функцию peep, чтобы начать появление кротов. Она запускает игровой таймер с использованием setTimeout, чтобы установить timeUp в true через 10 секунд. Также настраивает таймер обратного отсчета, чтобы обновлять отображение времени каждую секунду. Обратный отсчет изначально установлен на 10, и когда он достигает 0, таймер обратного отсчета очищается, кнопка "Старт" становится активной, и функция возвращает управление.

Реализуйте функцию whack

Теперь реализуем функцию whack, которая обрабатывает удары по кротов и обновляет счет.

Откройте файл main.js.
Найдите функцию whack.
Замените существующий код на следующий:

function whack(e) {
  if (!e.isTrusted || !this.querySelector(".mole").classList.contains("up"))
    return; // fake click detected or the mole is not up
  score++;
  this.querySelector(".mole").classList.remove("up");
  this.querySelector(".mole").classList.add("whacked");
  scoreDisplay.textContent = score;
}

Эта функция вызывается при нажатии на крота. Она проверяет, является ли событие нажатия доверенным (e.isTrusted), чтобы предотвратить поддельные нажатия. Она также проверяет, находится ли крот в данный момент вверх, проверяя, имеет ли он класс up. Если нажатие действительное, она увеличивает счет, удаляет класс up из элемента крота, добавляет класс whacked, чтобы визуально показать, что крота был поранен, и обновляет отображение счета.

Инициализируйте игру и слушатели событий

В этом шаге мы инициализируем игру, создавая ямы и добавляя слушатели событий на ямы и кнопку "Старт".

Откройте файл main.js.
Найдите строку с вызовом функции createHoles().
Добавьте следующий код после вызова функции createHoles():

holes.forEach((hole) => hole.addEventListener("click", whack));

startBtn.addEventListener("click", startGame);

Этот код добавляет слушатель события нажатия на каждый элемент ямы. Когда на яму нажимают, вызывается функция whack. Он также добавляет слушатель события нажатия на кнопку "Старт", который вызывает функцию startGame при нажатии.

Протестируйте игру Whack-a-Mole

Нажмите кнопку Go Live в нижнем правом углу WebIDE и переключитесь на вкладку Web 8080.

WebIDE Go Live button

Это откроет проект в вкладке Web 8080.

Web 8080 Tab view

Резюме

В этом проекте мы создали файлы проекта для игры Whack-a-Mole. Мы создали HTML-структуру, добавили CSS-стили и реализовали игровую логику с использованием JavaScript. Следующие шаги могут включать в себя дальнейшую настройку и улучшение игры, например, добавление звуков, уровней и настроек сложности.

Создание веб-игры Whack-a-Mole