14 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. Несмотря на наши усилия обеспечить точность, автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникающие в результате использования данного перевода.

14 KiB Raw Blame History Unescape Escape