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

Задатак

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

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

README.md Unescape Escape