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

Введение

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

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

🎯 Задачи

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

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

🏆 Достижения

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript/BasicConceptsGroup -.-> javascript/functions("Functions") javascript/AdvancedConceptsGroup -.-> javascript/async_prog("Asynchronous Programming") javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/DOMManipulationGroup -.-> javascript/event_handle("Event Handling") subgraph Lab Skills javascript/functions -.-> lab-445717{{"Создание веб-игры Whack-a-Mole"}} javascript/async_prog -.-> lab-445717{{"Создание веб-игры Whack-a-Mole"}} javascript/dom_select -.-> lab-445717{{"Создание веб-игры Whack-a-Mole"}} javascript/dom_manip -.-> lab-445717{{"Создание веб-игры Whack-a-Mole"}} javascript/event_handle -.-> lab-445717{{"Создание веб-игры Whack-a-Mole"}} end

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

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

Перейдите в директорию ~/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/[email protected]/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`

В этом шаге мы реализуем функцию 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.

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

✨ Проверить решение и практиковаться

Резюме

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

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

Введение

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

🎯 Задачи

🏆 Достижения

Skills Graph

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

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

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

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

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

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

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

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

Резюме

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

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

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