13 KiB

Raw Blame History Unescape Escape

Створення космічної гри, частина 5: Очки та життя

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

Готові зробити вашу космічну гру справжньою? Додамо систему очок і управління життями — основні механіки, які перетворили ранні аркадні ігри, такі як Space Invaders, з простих демонстрацій у захоплююче розвагу. Саме тут ваша гра стає дійсно цікавою.

Відображення тексту на екрані — голос вашої гри

Щоб показати ваші очки, нам потрібно навчитися відображати текст на полотні. Метод fillText() — ваш основний інструмент для цього. Це той самий метод, який використовувався в класичних аркадних іграх для показу очок і статусу.

Ви маєте повний контроль над виглядом тексту:

ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "right";
ctx.fillText("show this on the screen", 0, 0);

✅ Дізнайтеся більше про додавання тексту на полотно — можливо, ви здивуєтеся, наскільки творчо можна працювати зі шрифтами та стилями!

Життя — це більше, ніж просто число

У дизайні ігор "життя" представляє запас помилок гравця. Ця концепція бере початок з пінболу, де ви отримували кілька куль для гри. У ранніх відеоіграх, таких як Asteroids, життя давали гравцям можливість ризикувати і вчитися на помилках.

Візуальне представлення має велике значення — показ кораблів замість просто "Життя: 3" створює миттєве візуальне сприйняття, подібно до того, як ранні аркадні автомати використовували іконографію для спілкування через мовні бар'єри.

Створення системи винагород вашої гри

Тепер ми реалізуємо основні системи зворотного зв’язку, які утримують гравців:

Система очок: Кожен знищений ворожий корабель приносить 100 очок (круглі числа легше обчислювати подумки). Очки відображаються в нижньому лівому куті.
Лічильник життів: Ваш герой починає з трьох життів — стандарт, встановлений ранніми аркадними іграми для балансу між викликом і можливістю грати. Кожне зіткнення з ворогом коштує одного життя. Ми відобразимо залишок життів у нижньому правому куті за допомогою іконок кораблів .

Починаємо будувати!

Спочатку налаштуйте робоче середовище. Перейдіть до файлів у папці your-work. Ви повинні побачити ці файли:

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

Щоб протестувати вашу гру, запустіть сервер розробки з папки your_work:

cd your-work
npm start

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

Час кодувати!

Скопіюйте необхідні візуальні ресурси. Скопіюйте файл life.png з папки solution/assets/ у вашу папку your-work. Потім додайте lifeImg до функції window.onload:
```
lifeImg = await loadTexture("assets/life.png");
```
Не забудьте додати lifeImg до списку ваших ресурсів:
```
let heroImg,
...
lifeImg,
...
eventEmitter = new EventEmitter();
```
Налаштуйте змінні гри. Додайте код для відстеження загальної кількості очок (починаючи з 0) і залишку життів (починаючи з 3). Ми відобразимо ці дані на екрані, щоб гравці завжди знали, де вони знаходяться.

Реалізуйте виявлення зіткнень. Розширте функцію updateGameObjects(), щоб виявляти, коли вороги стикаються з вашим героєм:

enemies.forEach(enemy => {
    const heroRect = hero.rectFromGameObject();
    if (intersectRect(heroRect, enemy.rectFromGameObject())) {
      eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
    }
  })

Додайте відстеження життів і очок до вашого героя.

Ініціалізуйте лічильники. Під this.cooldown = 0 у класі Hero налаштуйте життя та очки:
```
this.life = 3;
this.points = 0;
```

Покажіть ці значення гравцю. Створіть функції для відображення цих значень на екрані:

function drawLife() {
  // TODO, 35, 27
  const START_POS = canvas.width - 180;
  for(let i=0; i < hero.life; i++ ) {
    ctx.drawImage(
      lifeImg, 
      START_POS + (45 * (i+1) ), 
      canvas.height - 37);
  }
}

function drawPoints() {
  ctx.font = "30px Arial";
  ctx.fillStyle = "red";
  ctx.textAlign = "left";
  drawText("Points: " + hero.points, 10, canvas.height-20);
}

function drawText(message, x, y) {
  ctx.fillText(message, x, y);
}

Підключіть все до циклу гри. Додайте ці функції до функції window.onload одразу після updateGameObjects():
```
drawPoints();
drawLife();
```

Реалізуйте наслідки та винагороди гри. Тепер ми додамо системи зворотного зв’язку, які роблять дії гравця значущими:
1. Зіткнення коштують життів. Кожного разу, коли ваш герой стикається з ворогом, ви повинні втратити життя.
  
  Додайте цей метод до класу Hero:
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```
2. Стрілянина у ворогів приносить очки. Кожне успішне попадання приносить 100 очок, забезпечуючи миттєвий позитивний зворотний зв’язок за точну стрільбу.
  
  Розширте клас Hero цим методом збільшення:
```
  incrementPoints() {
    this.points += 100;
  }
```
  Тепер підключіть ці функції до подій зіткнення:
```
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
   first.dead = true;
   second.dead = true;
   hero.incrementPoints();
})

eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
   enemy.dead = true;
   hero.decrementLife();
});
```

✅ Цікаво, які ще ігри створені за допомогою JavaScript і Canvas? Досліджуйте — можливо, ви здивуєтеся, що можливо створити!

Після реалізації цих функцій протестуйте вашу гру, щоб побачити повну систему зворотного зв’язку в дії. Ви повинні побачити іконки життів у нижньому правому куті, ваші очки в нижньому лівому куті, і спостерігати, як зіткнення зменшують життя, а успішні постріли збільшують очки.

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

Виклик GitHub Copilot Agent 🚀

Використовуйте режим Agent, щоб виконати наступний виклик:

Опис: Покращіть систему очок космічної гри, реалізувавши функцію високих очок із постійним збереженням і механікою бонусних очок.

Завдання: Створіть систему високих очок, яка зберігає найкращий результат гравця у localStorage. Додайте бонусні очки за послідовні знищення ворогів (система комбо) і реалізуйте різні значення очок для різних типів ворогів. Додайте візуальний індикатор, коли гравець досягає нового високого результату, і відображайте поточний високий результат на екрані гри.

🚀 Виклик

Тепер у вас є функціональна гра з очками та життями. Подумайте, які додаткові функції можуть покращити досвід гравця.

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

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

Хочете дізнатися більше? Досліджуйте різні підходи до систем очок і життів у іграх. Існують захоплюючі ігрові рушії, такі як PlayFab, які обробляють очки, таблиці лідерів і прогрес гравця. Як інтеграція чогось подібного може вивести вашу гру на новий рівень?

Завдання

Створіть гру з системою очок

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

13 KiB Raw Blame History Unescape Escape