# Направите свемирску игру, део 5: Поени и животи ## Квиз пре предавања [Квиз пре предавања](https://ff-quizzes.netlify.app/web/quiz/37) У овој лекцији ћете научити како да додате поене у игру и израчунате животе. ## Цртање текста на екрану Да бисте могли да прикажете резултат игре на екрану, потребно је да знате како да поставите текст на екран. Одговор је коришћење методе `fillText()` на објекту canvas. Такође можете контролисати и друге аспекте, као што су који фонт да користите, боја текста и чак његово поравнање (лево, десно, центар). Испод је пример кода који црта текст на екрану. ```javascript ctx.font = "30px Arial"; ctx.fillStyle = "red"; ctx.textAlign = "right"; ctx.fillText("show this on the screen", 0, 0); ``` ✅ Прочитајте више о [додавању текста на canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) и слободно учините да ваш текст изгледа лепше! ## Живот као концепт у игри Концепт живота у игри је само број. У контексту свемирске игре, уобичајено је доделити одређени број живота који се одузимају један по један када ваш брод претрпи штету. Лепо је ако можете приказати графички приказ овога, као што су мини-бродови или срца уместо броја. ## Шта треба направити Додајте следеће у вашу игру: - **Резултат игре**: За сваки непријатељски брод који је уништен, херој треба да добије одређени број поена, предлажемо 100 поена по броду. Резултат игре треба да се приказује у доњем левом углу. - **Животи**: Ваш брод има три живота. Губите један живот сваки пут када се непријатељски брод судари са вама. Број живота треба да се приказује у доњем десном углу и да буде сачињен од следеће графике . ## Препоручени кораци Пронађите фајлове који су већ креирани за вас у подфолдеру `your-work`. Требало би да садрже следеће: ```bash -| assets -| enemyShip.png -| player.png -| laserRed.png -| index.html -| app.js -| package.json ``` Покрените ваш пројекат у фолдеру `your_work` тако што ћете укуцати: ```bash cd your-work npm start ``` Горенаведено ће покренути HTTP сервер на адреси `http://localhost:5000`. Отворите претраживач и унесите ту адресу. Тренутно би требало да се прикаже херој и сви непријатељи, а када притиснете стрелице лево и десно, херој се помера и може да обара непријатеље. ### Додајте код 1. **Копирајте потребне ресурсе** из фолдера `solution/assets/` у фолдер `your-work`; додаћете ресурс `life.png`. Додајте `lifeImg` у функцију `window.onload`: ```javascript lifeImg = await loadTexture("assets/life.png"); ``` 1. Додајте `lifeImg` на листу ресурса: ```javascript let heroImg, ... lifeImg, ... eventEmitter = new EventEmitter(); ``` 2. **Додајте променљиве**. Додајте код који представља ваш укупни резултат (0) и преостале животе (3), и прикажите ове вредности на екрану. 3. **Проширите функцију `updateGameObjects()`**. Проширите функцију `updateGameObjects()` да обрађује сударе са непријатељима: ```javascript enemies.forEach(enemy => { const heroRect = hero.rectFromGameObject(); if (intersectRect(heroRect, enemy.rectFromGameObject())) { eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy }); } }) ``` 4. **Додајте `life` и `points`**. 1. **Иницијализујте променљиве**. Испод `this.cooldown = 0` у класи `Hero`, подесите `life` и `points`: ```javascript this.life = 3; this.points = 0; ``` 1. **Прикажите променљиве на екрану**. Прикажите ове вредности на екрану: ```javascript 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); } ``` 1. **Додајте методе у петљу игре**. Уверите се да сте додали ове функције у вашу функцију `window.onload` испод `updateGameObjects()`: ```javascript drawPoints(); drawLife(); ``` 1. **Имплементирајте правила игре**. Имплементирајте следећа правила игре: 1. **За сваки судар хероја и непријатеља**, одузмите један живот. Проширите класу `Hero` да изврши ово одузимање: ```javascript decrementLife() { this.life--; if (this.life === 0) { this.dead = true; } } ``` 2. **За сваки ласер који погоди непријатеља**, повећајте резултат игре за 100 поена. Проширите класу `Hero` да изврши ово повећање: ```javascript incrementPoints() { this.points += 100; } ``` Додајте ове функције у ваше емитере догађаја за сударе: ```javascript 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-а. Које су њихове заједничке карактеристике? На крају овог задатка, требало би да видите мале бродове за животе у доњем десном углу, поене у доњем левом углу, и требало би да видите како се број живота смањује када се сударите са непријатељима, а поени повећавају када пуцате на непријатеље. Браво! Ваша игра је скоро завршена. --- ## 🚀 Изазов Ваш код је скоро завршен. Можете ли замислити следеће кораке? ## Квиз после предавања [Квиз после предавања](https://ff-quizzes.netlify.app/web/quiz/38) ## Преглед и самостално учење Истражите начине на које можете повећавати и смањивати резултате и животе у игри. Постоје занимљиви алати за креирање игара као што је [PlayFab](https://playfab.com). Како би коришћење једног од њих побољшало вашу игру? ## Задатак [Направите игру са поенима](assignment.md) --- **Одрицање од одговорности**: Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, имајте у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не сносимо одговорност за било каква погрешна тумачења или неспоразуме који могу произаћи из коришћења овог превода.