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

Izgradnja svemirske igre, dio 5: Bodovi i životi

Kviz prije predavanja

U ovoj lekciji naučit ćete kako dodati bodove u igru i izračunavati živote.

Iscrtavanje teksta na ekranu

Kako biste mogli prikazati rezultat igre na ekranu, trebate znati kako postaviti tekst na ekran. Odgovor je korištenje metode fillText() na objektu canvas. Također možete kontrolirati i druge aspekte poput fonta, boje teksta pa čak i poravnanja (lijevo, desno, centrirano). Ispod je primjer koda koji iscrtava tekst na ekranu.

ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "right";
ctx.fillText("show this on the screen", 0, 0);

✅ Pročitajte više o dodavanju teksta na canvas i slobodno učinite svoj tekst vizualno privlačnijim!

Život kao koncept u igri

Koncept života u igri je samo broj. U kontekstu svemirske igre, uobičajeno je dodijeliti određeni broj života koji se smanjuju jedan po jedan kada vaš brod pretrpi štetu. Lijepo je ako možete prikazati grafičku reprezentaciju toga, poput malih brodova ili srca, umjesto samog broja.

Što ćemo izgraditi

Dodajmo sljedeće u vašu igru:

Rezultat igre: Za svaki neprijateljski brod koji uništite, heroj bi trebao dobiti određeni broj bodova, predlažemo 100 bodova po brodu. Rezultat igre trebao bi biti prikazan u donjem lijevom kutu.
Životi: Vaš brod ima tri života. Gubite jedan život svaki put kada se neprijateljski brod sudari s vama. Broj života trebao bi biti prikazan u donjem desnom kutu i sastojati se od sljedeće grafike .

Preporučeni koraci

Pronađite datoteke koje su već kreirane za vas u podmapi your-work. Trebale bi sadržavati sljedeće:

-| assets
  -| enemyShip.png
  -| player.png
  -| laserRed.png
-| index.html
-| app.js
-| package.json

Pokrenite svoj projekt u mapi your_work upisivanjem:

cd your-work
npm start

Gornja naredba pokrenut će HTTP poslužitelj na adresi http://localhost:5000. Otvorite preglednik i unesite tu adresu. Trenutno bi trebala prikazivati heroja i sve neprijatelje, a pritiskom na lijevu i desnu strelicu heroj se pomiče i može pucati na neprijatelje.

Dodavanje koda

Kopirajte potrebne resurse iz mape solution/assets/ u mapu your-work; dodajte resurs life.png. Dodajte lifeImg u funkciju window.onload:
```
lifeImg = await loadTexture("assets/life.png");
```

Dodajte lifeImg na popis resursa:

let heroImg,
...
lifeImg,
...
eventEmitter = new EventEmitter();

Dodajte varijable. Dodajte kod koji predstavlja vaš ukupni rezultat (0) i preostale živote (3), te prikažite te vrijednosti na ekranu.

Proširite funkciju updateGameObjects(). Proširite funkciju updateGameObjects() kako bi obrađivala sudare s neprijateljima:

enemies.forEach(enemy => {
    const heroRect = hero.rectFromGameObject();
    if (intersectRect(heroRect, enemy.rectFromGameObject())) {
      eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
    }
  })

Dodajte life i points.

Inicijalizirajte varijable. Ispod this.cooldown = 0 u klasi Hero, postavite život i bodove:
```
this.life = 3;
this.points = 0;
```

Iscrtajte varijable na ekranu. Prikažite te vrijednosti na ekranu:

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);
}

Dodajte metode u petlju igre. Pobrinite se da dodate ove funkcije u svoju funkciju window.onload ispod updateGameObjects():
```
drawPoints();
drawLife();
```

Implementirajte pravila igre. Implementirajte sljedeća pravila igre:

Za svaku koliziju heroja i neprijatelja, oduzmite jedan život.

Proširite klasu Hero kako biste to omogućili:

decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}

Za svaki laser koji pogodi neprijatelja, povećajte rezultat igre za 100 bodova.

Proširite klasu Hero kako biste to omogućili:

  incrementPoints() {
    this.points += 100;
  }

Dodajte ove funkcije u svoje emitere događaja sudara:

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();
});

✅ Istražite druge igre koje su izrađene pomoću JavaScript/Canvas. Koje su njihove zajedničke karakteristike?

Na kraju ovog zadatka trebali biste vidjeti male brodove za živote u donjem desnom kutu, bodove u donjem lijevom kutu, te biste trebali vidjeti kako se broj života smanjuje kada se sudarite s neprijateljima, a bodovi povećavaju kada pucate na neprijatelje. Bravo! Vaša igra je gotovo gotova.

🚀 Izazov

Vaš kod je gotovo dovršen. Možete li zamisliti svoje sljedeće korake?

Kviz nakon predavanja

Pregled i samostalno učenje

Istražite načine na koje možete povećavati i smanjivati bodove i živote u igri. Postoje zanimljivi alati za razvoj igara poput PlayFab. Kako bi korištenje jednog od njih moglo unaprijediti vašu igru?

Zadatak

Izgradite igru s bodovanjem

Odricanje od odgovornosti:
Ovaj dokument je preveden pomoću AI usluge za prevođenje Co-op Translator. Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.