History

leestott 3a46c7dc91 🌐 Update translations via Co-op Translator		3 weeks ago
..
solution	🌐 Update translations via Co-op Translator	4 weeks ago
your-work	🌐 Update translations via Co-op Translator	4 weeks ago
README.md	🌐 Update translations via Co-op Translator	3 weeks ago
assignment.md	🌐 Update translations via Co-op Translator	4 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;
  }
```
  Добавьте эти функции в ваши Collision Event Emitters:
```
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