History

Lee Stott 2daab5271b Update Quiz Link		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 Quiz Link	3 weeks ago
assignment.md	🌐 Update translations via Co-op Translator	3 weeks ago

README.md

Vytvorte vesmírnu hru, časť 5: Body a životy

Kvíz pred prednáškou

V tejto lekcii sa naučíte, ako pridať bodovanie do hry a počítať životy.

Zobrazenie textu na obrazovke

Aby ste mohli zobrazovať skóre hry na obrazovke, musíte vedieť, ako umiestniť text na obrazovku. Odpoveďou je použitie metódy fillText() na objekte canvas. Môžete tiež ovládať ďalšie aspekty, ako napríklad aké písmo použiť, farbu textu a dokonca aj jeho zarovnanie (vľavo, vpravo, na stred). Nižšie je uvedený kód, ktorý zobrazuje text na obrazovke.

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

✅ Prečítajte si viac o tom, ako pridať text na plátno, a pokojne si ho upravte podľa svojich predstáv!

Život ako herný koncept

Koncept života v hre je len číslo. V kontexte vesmírnej hry je bežné priradiť určitý počet životov, ktoré sa odpočítavajú jeden po druhom, keď vaša loď utrpí poškodenie. Je pekné, ak môžete namiesto čísla zobraziť grafickú reprezentáciu, ako sú malé lode alebo srdcia.

Čo vytvoriť

Pridajte do svojej hry nasledujúce prvky:

Herné skóre: Za každú zničenú nepriateľskú loď by mal hrdina získať body, odporúčame 100 bodov za loď. Herné skóre by sa malo zobrazovať v ľavom dolnom rohu.
Životy: Vaša loď má tri životy. O život prídete zakaždým, keď do vás narazí nepriateľská loď. Počet životov by sa mal zobrazovať v pravom dolnom rohu a mal by byť reprezentovaný nasledujúcou grafikou .

Odporúčané kroky

Nájdite súbory, ktoré boli pre vás vytvorené v podpriečinku your-work. Mali by obsahovať nasledujúce:

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

Spustite svoj projekt v priečinku your_work zadaním:

cd your-work
npm start

Vyššie uvedené spustí HTTP server na adrese http://localhost:5000. Otvorte prehliadač a zadajte túto adresu. Momentálne by sa mal zobraziť hrdina a všetci nepriatelia, a keď stlačíte šípky doľava a doprava, hrdina sa pohybuje a môže zostreľovať nepriateľov.

Pridanie kódu

Skopírujte potrebné zdroje z priečinka solution/assets/ do priečinka your-work; pridáte zdroj life.png. Pridajte lifeImg do funkcie window.onload:
```
lifeImg = await loadTexture("assets/life.png");
```

Pridajte lifeImg do zoznamu zdrojov:

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

Pridajte premenné. Pridajte kód, ktorý reprezentuje vaše celkové skóre (0) a zostávajúce životy (3), a zobrazte tieto hodnoty na obrazovke.

Rozšírte funkciu updateGameObjects(). Rozšírte funkciu updateGameObjects() tak, aby spracovávala kolízie s nepriateľmi:

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

Pridajte life a points.

Inicializujte premenné. Pod this.cooldown = 0 v triede Hero nastavte životy a body:
```
this.life = 3;
this.points = 0;
```

Zobrazte premenné na obrazovke. Zobrazte tieto hodnoty na obrazovke:

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

Pridajte metódy do hernej slučky. Uistite sa, že ste pridali tieto funkcie do funkcie window.onload pod updateGameObjects():
```
drawPoints();
drawLife();
```

Implementujte herné pravidlá. Implementujte nasledujúce herné pravidlá:

Za každú kolíziu hrdinu s nepriateľom odpočítajte jeden život.

Rozšírte triedu Hero, aby vykonávala toto odpočítanie:
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```

Za každý laser, ktorý zasiahne nepriateľa, zvýšte herné skóre o 100 bodov.

Rozšírte triedu Hero, aby vykonávala toto zvýšenie:

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

Pridajte tieto funkcie do vašich emitorov udalostí kolízie:

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

✅ Urobte si malý prieskum a objavte ďalšie hry, ktoré sú vytvorené pomocou JavaScriptu/Canvasu. Aké majú spoločné črty?

Na konci tejto práce by ste mali vidieť malé lode reprezentujúce životy v pravom dolnom rohu, body v ľavom dolnom rohu a mali by ste vidieť, ako sa počet životov znižuje pri kolíziách s nepriateľmi a body sa zvyšujú, keď zostreľujete nepriateľov. Skvelá práca! Vaša hra je takmer hotová.

🚀 Výzva

Váš kód je takmer hotový. Dokážete si predstaviť svoje ďalšie kroky?

Kvíz po prednáške

Prehľad a samoštúdium

Preskúmajte spôsoby, ako môžete zvyšovať a znižovať herné skóre a životy. Existujú zaujímavé herné enginy, ako napríklad PlayFab. Ako by použitie jedného z nich mohlo vylepšiť vašu hru?

Zadanie

Postavte hru s bodovaním

Upozornenie:
Tento dokument bol preložený pomocou služby na automatický preklad Co-op Translator. Aj keď sa snažíme o presnosť, upozorňujeme, že automatické preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nezodpovedáme za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.