12 KiB

Raw Permalink Blame History Unescape Escape

Створення космічної гри, частина 6: Завершення та перезапуск

Тест перед лекцією

Існують різні способи визначення умови завершення гри. Як творець гри, ви вирішуєте, чому гра завершується. Ось кілька причин, якщо припустити, що ми говоримо про космічну гру, яку ви створювали до цього:

Знищено N ворожих кораблів: Це досить поширено, якщо гра поділена на рівні, і для завершення рівня потрібно знищити N ворожих кораблів.
Ваш корабель знищено: У багатьох іграх ви програєте, якщо ваш корабель знищено. Інший поширений підхід — це концепція життів. Кожного разу, коли ваш корабель знищено, у вас віднімається одне життя. Коли всі життя втрачені, гра завершується.
Ви зібрали N очок: Ще одна поширена умова завершення — це збирання очок. Як саме ви отримуєте очки, залежить від вас, але зазвичай очки нараховуються за різні дії, наприклад, знищення ворожого корабля або збирання предметів, які випадають після їх знищення.
Завершення рівня: Це може включати кілька умов, таких як знищення X ворожих кораблів, збирання Y очок або, можливо, збирання певного предмета.

Перезапуск

Якщо людям подобається ваша гра, вони, ймовірно, захочуть зіграти знову. Коли гра завершується з будь-якої причини, ви повинні запропонувати можливість перезапустити її.

✅ Подумайте, за яких умов гра завершується, і як вас зазвичай спонукають до її перезапуску.

Що потрібно створити

Ви додасте ці правила до своєї гри:

Перемога в грі. Коли всі ворожі кораблі знищено, ви виграєте гру. Додатково відобразіть повідомлення про перемогу.
Перезапуск. Коли всі ваші життя втрачені або гра виграна, ви повинні запропонувати спосіб перезапустити гру. Пам'ятайте! Вам потрібно буде ініціалізувати гру заново, і попередній стан гри має бути очищений.

Рекомендовані кроки

Знайдіть файли, які були створені для вас у підпапці your-work. Вона повинна містити наступне:

-| assets
  -| enemyShip.png
  -| player.png
  -| laserRed.png
  -| life.png
-| index.html
-| app.js
-| package.json

Запустіть свій проєкт у папці your_work, ввівши:

cd your-work
npm start

Це запустить HTTP-сервер за адресою http://localhost:5000. Відкрийте браузер і введіть цю адресу. Ваша гра має бути в ігровому стані.

порада: щоб уникнути попереджень у Visual Studio Code, відредагуйте функцію window.onload, щоб викликати gameLoopId як є (без let), і оголосіть gameLoopId на початку файлу окремо: let gameLoopId;

Додайте код

Відстеження умови завершення. Додайте код, який відстежує кількість ворогів або чи був знищений корабель героя, додавши ці дві функції:
```
function isHeroDead() {
  return hero.life <= 0;
}

function isEnemiesDead() {
  const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
  return enemies.length === 0;
}
```

Додайте логіку до обробників повідомлень. Відредагуйте eventEmitter, щоб обробляти ці умови:

eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
    first.dead = true;
    second.dead = true;
    hero.incrementPoints();

    if (isEnemiesDead()) {
      eventEmitter.emit(Messages.GAME_END_WIN);
    }
});

eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
    enemy.dead = true;
    hero.decrementLife();
    if (isHeroDead())  {
      eventEmitter.emit(Messages.GAME_END_LOSS);
      return; // loss before victory
    }
    if (isEnemiesDead()) {
      eventEmitter.emit(Messages.GAME_END_WIN);
    }
});

eventEmitter.on(Messages.GAME_END_WIN, () => {
    endGame(true);
});

eventEmitter.on(Messages.GAME_END_LOSS, () => {
  endGame(false);
});

Додайте нові типи повідомлень. Додайте ці повідомлення до об'єкта constants:
```
GAME_END_LOSS: "GAME_END_LOSS",
GAME_END_WIN: "GAME_END_WIN",
```
Додайте код для перезапуску. Додайте код, який перезапускає гру при натисканні вибраної кнопки.
1. Слухайте натискання клавіші Enter. Відредагуйте eventListener вашого вікна, щоб слухати це натискання:
```
 else if(evt.key === "Enter") {
    eventEmitter.emit(Messages.KEY_EVENT_ENTER);
  }
```
1. Додайте повідомлення про перезапуск. Додайте це повідомлення до вашого об'єкта Messages:
```
KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
```

Реалізуйте правила гри. Реалізуйте наступні правила гри:

Умова перемоги гравця. Коли всі ворожі кораблі знищено, відобразіть повідомлення про перемогу.

Спочатку створіть функцію displayMessage():

function displayMessage(message, color = "red") {
  ctx.font = "30px Arial";
  ctx.fillStyle = color;
  ctx.textAlign = "center";
  ctx.fillText(message, canvas.width / 2, canvas.height / 2);
}

Створіть функцію endGame():

function endGame(win) {
  clearInterval(gameLoopId);

  // set a delay so we are sure any paints have finished
  setTimeout(() => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    if (win) {
      displayMessage(
        "Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
        "green"
      );
    } else {
      displayMessage(
        "You died !!! Press [Enter] to start a new game Captain Pew Pew"
      );
    }
  }, 200)  
}

Логіка перезапуску. Коли всі життя втрачені або гравець виграв гру, відобразіть, що гру можна перезапустити. Додатково перезапустіть гру, коли натиснуто клавішу для перезапуску (ви можете вирішити, яка клавіша буде відповідати за перезапуск).

Створіть функцію resetGame():

function resetGame() {
  if (gameLoopId) {
    clearInterval(gameLoopId);
    eventEmitter.clear();
    initGame();
    gameLoopId = setInterval(() => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = "black";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      drawPoints();
      drawLife();
      updateGameObjects();
      drawGameObjects(ctx);
    }, 100);
  }
}

Додайте виклик до eventEmitter для скидання гри у initGame():
```
eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
  resetGame();
});
```
Додайте функцію clear() до EventEmitter:
```
clear() {
  this.listeners = {};
}
```

👽 💥 🚀 Вітаємо, Капітане! Ваша гра завершена! Чудова робота! 🚀 💥 👽

🚀 Виклик

Додайте звук! Чи можете ви додати звук, щоб покращити ігровий процес, наприклад, коли лазер влучає, герой гине або виграє? Ознайомтеся з цим прикладом, щоб дізнатися, як відтворювати звук за допомогою JavaScript.

Тест після лекції

Огляд і самостійне навчання

Ваше завдання — створити нову пробну гру, тому досліджуйте цікаві ігри, щоб побачити, яку гру ви могли б створити.

Завдання

Створіть пробну гру

Відмова від відповідальності:
Цей документ був перекладений за допомогою сервісу автоматичного перекладу Co-op Translator. Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.

12 KiB Raw Permalink Blame History Unescape Escape