History

leestott c0ca49b2cc 🌐 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 });
    }
  })

Добавете life и points.

Инициализирайте променливи. Под this.cooldown = 0 в класа Hero задайте life и points:
```
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. Как използването на такъв енджин би подобрило вашата игра?

Задание

Създайте игра с точки

Отказ от отговорност:
Този документ е преведен с помощта на AI услуга за превод Co-op Translator. Въпреки че се стремим към точност, моля, имайте предвид, че автоматичните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия изходен език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален превод от човек. Ние не носим отговорност за каквито и да е недоразумения или погрешни интерпретации, произтичащи от използването на този превод.

README.md Unescape Escape