# Zgradite vesoljsko igro, 5. del: Točkovanje in življenja ## Predhodni kviz [Predhodni kviz](https://ff-quizzes.netlify.app/web/quiz/37) V tej lekciji se boste naučili, kako dodati točkovanje v igro in izračunati življenja. ## Risanje besedila na zaslon Da bi lahko prikazali rezultat igre na zaslonu, morate vedeti, kako postaviti besedilo na zaslon. Odgovor je uporaba metode `fillText()` na objektu canvas. Prav tako lahko nadzorujete druge vidike, kot so izbira pisave, barva besedila in celo poravnava (levo, desno, sredina). Spodaj je nekaj kode, ki riše besedilo na zaslon. ```javascript ctx.font = "30px Arial"; ctx.fillStyle = "red"; ctx.textAlign = "right"; ctx.fillText("show this on the screen", 0, 0); ``` ✅ Preberite več o [dodajanju besedila na canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) in poskrbite, da bo vaše videti še bolj privlačno! ## Življenje kot koncept v igri Koncept življenja v igri je zgolj številka. V kontekstu vesoljske igre je običajno dodeliti določeno število življenj, ki se zmanjšujejo eno za drugim, ko vaša ladja utrpi škodo. Lepo je, če lahko to prikažete grafično, na primer z mini ladjami ali srčki, namesto s številko. ## Kaj bomo zgradili Dodajmo naslednje elemente v vašo igro: - **Rezultat igre**: Za vsako uničeno sovražno ladjo naj junak prejme nekaj točk, predlagamo 100 točk na ladjo. Rezultat igre naj bo prikazan v spodnjem levem kotu. - **Življenje**: Vaša ladja ima tri življenja. Izgubite življenje vsakič, ko sovražna ladja trči v vas. Število življenj naj bo prikazano v spodnjem desnem kotu in naj bo sestavljeno iz naslednje grafike . ## Priporočeni koraki Poiščite datoteke, ki so bile ustvarjene za vas v podmapi `your-work`. Vsebujejo naslednje: ```bash -| assets -| enemyShip.png -| player.png -| laserRed.png -| index.html -| app.js -| package.json ``` Začnite svoj projekt v mapi `your_work` tako, da vnesete: ```bash cd your-work npm start ``` Zgornji ukaz bo zagnal HTTP strežnik na naslovu `http://localhost:5000`. Odprite brskalnik in vnesite ta naslov. Trenutno bi moral prikazati junaka in vse sovražnike, ter ob pritisku na levo in desno puščico junak premika in lahko strelja sovražnike. ### Dodajanje kode 1. **Kopirajte potrebne vire** iz mape `solution/assets/` v mapo `your-work`; dodali boste datoteko `life.png`. Dodajte `lifeImg` v funkcijo window.onload: ```javascript lifeImg = await loadTexture("assets/life.png"); ``` 1. Dodajte `lifeImg` na seznam virov: ```javascript let heroImg, ... lifeImg, ... eventEmitter = new EventEmitter(); ``` 2. **Dodajte spremenljivke**. Dodajte kodo, ki predstavlja vaš skupni rezultat (0) in preostala življenja (3), ter prikažite te vrednosti na zaslonu. 3. **Razširite funkcijo `updateGameObjects()`**. Razširite funkcijo `updateGameObjects()`, da obravnava trke s sovražniki: ```javascript enemies.forEach(enemy => { const heroRect = hero.rectFromGameObject(); if (intersectRect(heroRect, enemy.rectFromGameObject())) { eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy }); } }) ``` 4. **Dodajte `življenje` in `točke`**. 1. **Inicializirajte spremenljivke**. Pod `this.cooldown = 0` v razredu `Hero` nastavite življenje in točke: ```javascript this.life = 3; this.points = 0; ``` 1. **Narišite spremenljivke na zaslon**. Prikažite te vrednosti na zaslonu: ```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. **Dodajte metode v zanko igre**. Poskrbite, da dodate te funkcije v funkcijo window.onload pod `updateGameObjects()`: ```javascript drawPoints(); drawLife(); ``` 1. **Implementirajte pravila igre**. Implementirajte naslednja pravila igre: 1. **Za vsak trk junaka in sovražnika** odštejte eno življenje. Razširite razred `Hero`, da izvedete to odštevanje: ```javascript decrementLife() { this.life--; if (this.life === 0) { this.dead = true; } } ``` 2. **Za vsak laser, ki zadene sovražnika**, povečajte rezultat igre za 100 točk. Razširite razred `Hero`, da izvedete to povečanje: ```javascript incrementPoints() { this.points += 100; } ``` Dodajte te funkcije v vaše sprožilce dogodkov trkov: ```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(); }); ``` ✅ Raziskujte in odkrijte druge igre, ki so ustvarjene z uporabo JavaScript/Canvas. Kakšne so njihove skupne značilnosti? Ko zaključite delo, bi morali videti majhne ladje 'življenja' v spodnjem desnem kotu, točke v spodnjem levem kotu, ter opaziti, kako se število življenj zmanjšuje ob trkih s sovražniki in točke povečujejo ob streljanju sovražnikov. Odlično! Vaša igra je skoraj končana. --- ## 🚀 Izziv Vaša koda je skoraj končana. Ali lahko predvidite naslednje korake? ## Zaključni kviz [Zaključni kviz](https://ff-quizzes.netlify.app/web/quiz/38) ## Pregled in samostojno učenje Raziskujte načine, kako lahko povečujete in zmanjšujete rezultate igre ter življenja. Obstajajo zanimivi igralni pogoni, kot je [PlayFab](https://playfab.com). Kako bi uporaba enega od teh izboljšala vašo igro? ## Naloga [Zgradite igro s točkovanjem](assignment.md) --- **Omejitev odgovornosti**: Ta dokument je bil preveden z uporabo storitve za strojno prevajanje [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo strokovno človeško prevajanje. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki izhajajo iz uporabe tega prevoda.