History

softchris bde9da6dad 🌐 Update translations via Co-op Translator		1 month ago
..
solution	🌐 Update translations via Co-op Translator	3 months ago
your-work	🌐 Update translations via Co-op Translator	3 months ago
README.md	🌐 Update translations via Co-op Translator	1 month ago
assignment.md	🌐 Update translations via Co-op Translator	3 months ago

README.md

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. Иако настојимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.

README.md Unescape Escape