History

leestott a2fda673a6 🌐 Update translations via Co-op Translator		3 weeks ago
..
solution	🌐 Update translations via Co-op Translator	3 weeks ago
your-work	🌐 Update translations via Co-op Translator	3 weeks ago
README.md	🌐 Update translations via Co-op Translator	3 weeks ago
assignment.md	🌐 Update translations via Co-op Translator	3 weeks ago

README.md

Unescape Escape

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

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

У цьому уроці ви навчитеся додавати очки до гри та розраховувати життя.

Відображення тексту на екрані

Щоб показати очки гри на екрані, потрібно знати, як розміщувати текст на екрані. Відповідь — використання методу fillText() об'єкта canvas. Ви також можете контролювати інші аспекти, такі як шрифт, колір тексту та навіть його вирівнювання (ліворуч, праворуч, по центру). Нижче наведено код, який малює текст на екрані.

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

✅ Дізнайтеся більше про додавання тексту до canvas, і не соромтеся зробити ваш текст більш стильним!

Життя як концепція гри

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

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

Додайте наступне до вашої гри:

Очки гри: За кожен знищений ворожий корабель герой повинен отримувати очки, ми пропонуємо 100 очок за корабель. Очки гри повинні відображатися внизу ліворуч.
Життя: Ваш корабель має три життя. Ви втрачаєте життя кожного разу, коли ворожий корабель стикається з вами. Кількість життів повинна відображатися внизу праворуч у вигляді наступного графічного елемента .

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

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

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

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

cd your-work
npm start

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

Додайте код

Скопіюйте необхідні ресурси з папки solution/assets/ у папку your-work; ви додасте ресурс life.png. Додайте lifeImg до функції window.onload:
```
lifeImg = await loadTexture("assets/life.png");
```

Додайте lifeImg до списку ресурсів:

let heroImg,
...
lifeImg,
...
eventEmitter = new EventEmitter();

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

Розширте функцію updateGameObjects(). Розширте функцію 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. Які їхні спільні риси?

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

🚀 Виклик

Ваш код майже завершений. Чи можете ви уявити наступні кроки?

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

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

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

Завдання

Створіть гру з підрахунком очок

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

README.md Unescape Escape