History

Lee Stott 2daab5271b Update Quiz Link		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 Quiz Link	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. Како би коришћење једног од њих побољшало вашу игру?

Задатак

Направите игру са поенима

Одрицање од одговорности:
Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције Co-op Translator. Иако се трудимо да обезбедимо тачност, имајте у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не сносимо одговорност за било каква погрешна тумачења или неспоразуме који могу произаћи из коришћења овог превода.

README.md Unescape Escape