9.1 KiB

Raw Blame History Unescape Escape

Vytvořte vesmírnou hru, část 5: Skóre a životy

Kvíz před přednáškou

Připraveni udělat z vaší vesmírné hry skutečnou hru? Přidáme bodování a správu životů – základní mechaniky, které proměnily rané arkádové hry jako Space Invaders z jednoduchých ukázek na návykovou zábavu. Tady se vaše hra stává opravdu hratelnou.

Zobrazení textu na obrazovce - Hlas vaší hry

Abychom zobrazili vaše skóre, musíme se naučit, jak vykreslit text na plátno. Metoda fillText() je vaším hlavním nástrojem – stejná technika byla použita v klasických arkádových hrách k zobrazení skóre a informací o stavu.

Máte úplnou kontrolu nad vzhledem textu:

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

✅ Prozkoumejte více o přidávání textu na plátno – možná vás překvapí, jak kreativní můžete být s fonty a stylováním!

Životy - Více než jen číslo

V herním designu "život" představuje hráčovu toleranci k chybám. Tento koncept pochází z pinballových strojů, kde jste měli více míčků na hraní. V raných videohrách jako Asteroids životy umožnily hráčům riskovat a učit se z chyb.

Vizualizace je velmi důležitá – zobrazení ikon lodí místo pouhého "Životy: 3" vytváří okamžité vizuální rozpoznání, podobně jako rané arkádové automaty používaly ikonografii k překonání jazykových bariér.

Budování systému odměn vaší hry

Teď implementujeme základní systémy zpětné vazby, které udržují hráče zapojené:

Systém bodování: Každá zničená nepřátelská loď přidává 100 bodů (kulatá čísla se hráčům snadněji počítají). Skóre se zobrazuje v levém dolním rohu.
Počítadlo životů: Váš hrdina začíná se třemi životy – standard, který byl zaveden v raných arkádových hrách pro vyvážení výzvy a hratelnosti. Každá kolize s nepřítelem stojí jeden život. Zbývající životy zobrazíme v pravém dolním rohu pomocí ikon lodí .

Pojďme stavět!

Nejprve si připravte pracovní prostředí. Přejděte do složky your-work. Měli byste vidět tyto soubory:

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

Pro otestování vaší hry spusťte vývojový server ze složky your_work:

cd your-work
npm start

Tím spustíte lokální server na adrese http://localhost:5000. Otevřete tuto adresu ve svém prohlížeči, abyste viděli svou hru. Otestujte ovládání pomocí šipek a zkuste střílet na nepřátele, abyste ověřili, že vše funguje.

Čas na kódování!

Získejte vizuální prvky, které budete potřebovat. Zkopírujte soubor life.png z adresáře solution/assets/ do vaší složky your-work. Poté přidejte lifeImg do funkce window.onload:
```
lifeImg = await loadTexture("assets/life.png");
```

Nezapomeňte přidat lifeImg do seznamu vašich aktiv:

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

Nastavte proměnné hry. Přidejte kód pro sledování celkového skóre (začínající na 0) a zbývajících životů (začínající na 3). Tyto hodnoty zobrazíme na obrazovce, aby hráči vždy věděli, jak si stojí.

Implementujte detekci kolizí. Rozšiřte funkci updateGameObjects(), aby detekovala, kdy nepřátelé narazí do vašeho hrdiny:

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

Přidejte sledování životů a bodů vašemu hrdinovi.

Inicializujte počítadla. Pod this.cooldown = 0 ve třídě Hero nastavte životy a body:
```
this.life = 3;
this.points = 0;
```

Zobrazte tyto hodnoty hráči. Vytvořte funkce pro vykreslení těchto hodnot na obrazovce:

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

Připojte vše do herní smyčky. Přidejte tyto funkce do funkce window.onload hned po updateGameObjects():
```
drawPoints();
drawLife();
```

Implementujte důsledky a odměny hry. Teď přidáme systémy zpětné vazby, které dávají hráčským akcím smysl:
1. Kolize stojí životy. Pokaždé, když váš hrdina narazí do nepřítele, ztratíte jeden život.
  
  Přidejte tuto metodu do třídy Hero:
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```
2. Střelba na nepřátele přináší body. Každý úspěšný zásah přidává 100 bodů, což poskytuje okamžitou pozitivní zpětnou vazbu za přesnou střelbu.
  
  Rozšiřte třídu Hero o tuto metodu pro přičítání bodů:
```
  incrementPoints() {
    this.points += 100;
  }
```
  Teď připojte tyto funkce k událostem kolize:
```
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();
});
```

✅ Zajímá vás, jaké další hry byly vytvořeny pomocí JavaScriptu a Canvasu? Prozkoumejte to – možná budete překvapeni, co je možné!

Po implementaci těchto funkcí otestujte svou hru, abyste viděli kompletní systém zpětné vazby v akci. Měli byste vidět ikony životů v pravém dolním rohu, skóre v levém dolním rohu a sledovat, jak kolize snižují životy, zatímco úspěšné střely zvyšují skóre.

Vaše hra nyní obsahuje základní mechaniky, které učinily rané arkádové hry tak poutavými – jasné cíle, okamžitou zpětnou vazbu a smysluplné důsledky hráčských akcí.

Výzva GitHub Copilot Agent 🚀

Použijte režim Agent k dokončení následující výzvy:

Popis: Vylepšete bodovací systém vesmírné hry implementací funkce nejvyššího skóre s trvalým uložením a mechanikou bonusového bodování.

Úkol: Vytvořte systém nejvyššího skóre, který uloží nejlepší skóre hráče do localStorage. Přidejte bonusové body za po sobě jdoucí zničení nepřátel (systém komba) a implementujte různé hodnoty bodů pro různé typy nepřátel. Zahrňte vizuální indikátor, když hráč dosáhne nového nejvyššího skóre, a zobrazte aktuální nejvyšší skóre na obrazovce hry.

🚀 Výzva

Nyní máte funkční hru s bodováním a životy. Zvažte, jaké další funkce by mohly zlepšit zážitek hráče.

Kvíz po přednášce

Opakování a samostudium

Chcete se dozvědět více? Prozkoumejte různé přístupy k bodování a systémům životů ve hrách. Existují fascinující herní enginy jako PlayFab, které se zabývají bodováním, žebříčky a pokrokem hráčů. Jak by integrace něčeho takového mohla posunout vaši hru na další úroveň?

Úkol

Postavte hru s bodováním

Prohlášení:
Tento dokument byl přeložen pomocí služby AI pro překlady Co-op Translator. I když se snažíme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.

9.1 KiB Raw Blame History Unescape Escape