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