8.7 KiB

Raw Permalink Blame History

Vytvorenie vesmírnej hry, časť 6: Koniec a reštart

Kvíz pred prednáškou

Existuje mnoho spôsobov, ako vyjadriť podmienku konca v hre. Je na vás ako tvorcovi hry, aby ste určili, prečo hra skončila. Tu sú niektoré dôvody, ak predpokladáme, že hovoríme o vesmírnej hre, ktorú ste doteraz vytvárali:

Zničených N nepriateľských lodí: Je bežné, že ak rozdelíte hru na rôzne úrovne, musíte zničiť N nepriateľských lodí, aby ste dokončili úroveň.
Vaša loď bola zničená: Existujú hry, kde prehráte, ak je vaša loď zničená. Ďalším bežným prístupom je koncept životov. Každý raz, keď je vaša loď zničená, odpočíta sa jeden život. Ak stratíte všetky životy, prehráte hru.
Nazbierali ste N bodov: Ďalšou bežnou podmienkou konca je nazbieranie bodov. Ako získavate body, je na vás, ale je bežné priradiť body k rôznym aktivitám, ako je zničenie nepriateľskej lode alebo zbieranie predmetov, ktoré sa objavia, keď sú zničené.
Dokončenie úrovne: To môže zahŕňať niekoľko podmienok, ako napríklad zničenie X nepriateľských lodí, nazbieranie Y bodov alebo možno získanie konkrétneho predmetu.

Reštartovanie

Ak sa ľuďom vaša hra páči, pravdepodobne ju budú chcieť hrať znova. Keď hra skončí z akéhokoľvek dôvodu, mali by ste ponúknuť možnosť reštartovať.

✅ Zamyslite sa nad tým, za akých podmienok hra končí, a ako ste vyzvaní na jej reštartovanie.

Čo vytvoriť

Do svojej hry pridáte tieto pravidlá:

Víťazstvo v hre. Keď sú všetky nepriateľské lode zničené, vyhrávate hru. Navyše zobrazte nejakú formu víťaznej správy.
Reštart. Keď stratíte všetky životy alebo vyhráte hru, mali by ste ponúknuť možnosť reštartovať hru. Pamätajte! Budete musieť inicializovať hru nanovo a vymazať predchádzajúci stav hry.

Odporúčané kroky

Vyhľadajte 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
  -| life.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. Vaša hra by mala byť v hrateľnom stave.

tip: aby ste sa vyhli varovaniam vo Visual Studio Code, upravte funkciu window.onload, aby volala gameLoopId tak, ako je (bez let), a deklarujte premennú gameLoopId na začiatku súboru nezávisle: let gameLoopId;

Pridanie kódu

Sledovanie podmienky konca. Pridajte kód, ktorý sleduje počet nepriateľov alebo či bola hrdinská loď zničená, pridaním týchto dvoch funkcií:

function isHeroDead() {
  return hero.life <= 0;
}

function isEnemiesDead() {
  const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
  return enemies.length === 0;
}

Pridanie logiky do spracovania správ. Upraviť eventEmitter, aby spracovával tieto podmienky:

eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
    first.dead = true;
    second.dead = true;
    hero.incrementPoints();

    if (isEnemiesDead()) {
      eventEmitter.emit(Messages.GAME_END_WIN);
    }
});

eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
    enemy.dead = true;
    hero.decrementLife();
    if (isHeroDead())  {
      eventEmitter.emit(Messages.GAME_END_LOSS);
      return; // loss before victory
    }
    if (isEnemiesDead()) {
      eventEmitter.emit(Messages.GAME_END_WIN);
    }
});

eventEmitter.on(Messages.GAME_END_WIN, () => {
    endGame(true);
});

eventEmitter.on(Messages.GAME_END_LOSS, () => {
  endGame(false);
});

Pridanie nových typov správ. Pridajte tieto správy do objektu constants:
```
GAME_END_LOSS: "GAME_END_LOSS",
GAME_END_WIN: "GAME_END_WIN",
```
Pridanie kódu na reštart. Pridajte kód, ktorý reštartuje hru po stlačení vybraného tlačidla.
1. Počúvanie stlačenia klávesu Enter. Upraviť eventListener okna, aby počúval toto stlačenie:
```
 else if(evt.key === "Enter") {
    eventEmitter.emit(Messages.KEY_EVENT_ENTER);
  }
```
1. Pridanie správy o reštarte. Pridajte túto správu do constants Messages:
```
KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
```

Implementácia pravidiel hry. Implementujte nasledujúce pravidlá hry:

Podmienka víťazstva hráča. Keď sú všetky nepriateľské lode zničené, zobrazte víťaznú správu.

Najskôr vytvorte funkciu displayMessage():

function displayMessage(message, color = "red") {
  ctx.font = "30px Arial";
  ctx.fillStyle = color;
  ctx.textAlign = "center";
  ctx.fillText(message, canvas.width / 2, canvas.height / 2);
}

Vytvorte funkciu endGame():

function endGame(win) {
  clearInterval(gameLoopId);

  // set a delay so we are sure any paints have finished
  setTimeout(() => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    if (win) {
      displayMessage(
        "Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
        "green"
      );
    } else {
      displayMessage(
        "You died !!! Press [Enter] to start a new game Captain Pew Pew"
      );
    }
  }, 200)  
}

Logika reštartu. Keď sú všetky životy stratené alebo hráč vyhral hru, zobrazte, že hru je možné reštartovať. Navyše reštartujte hru, keď je stlačený reštartovací kláves (môžete rozhodnúť, ktorý kláves bude mapovaný na reštart).

Vytvorte funkciu resetGame():

function resetGame() {
  if (gameLoopId) {
    clearInterval(gameLoopId);
    eventEmitter.clear();
    initGame();
    gameLoopId = setInterval(() => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = "black";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      drawPoints();
      drawLife();
      updateGameObjects();
      drawGameObjects(ctx);
    }, 100);
  }
}

Pridajte volanie do eventEmitter, aby sa hra resetovala v initGame():

eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
  resetGame();
});

Pridajte funkciu clear() do EventEmitter:
```
clear() {
  this.listeners = {};
}
```

👽 💥 🚀 Gratulujeme, kapitán! Vaša hra je dokončená! Skvelá práca! 🚀 💥 👽

🚀 Výzva

Pridajte zvuk! Dokážete pridať zvuk na zlepšenie herného zážitku, napríklad pri zásahu laserom, smrti hrdinu alebo víťazstve? Pozrite si tento sandbox, aby ste sa naučili, ako prehrávať zvuk pomocou JavaScriptu.

Kvíz po prednáške

Prehľad a samostatné štúdium

Vašou úlohou je vytvoriť novú ukážkovú hru, takže preskúmajte niektoré zaujímavé hry, aby ste zistili, aký typ hry by ste mohli vytvoriť.

Úloha

Vytvorte ukážkovú hru

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.

8.7 KiB Raw Permalink Blame History