9.4 KiB

Raw Permalink Blame History

Űrjáték építése 6. rész: Befejezés és újrakezdés

Előadás előtti kvíz

Egy játékban különböző módokon lehet kifejezni a befejezési feltételt. Mint a játék készítője, rajtad múlik, hogy meghatározd, miért ér véget a játék. Íme néhány ok, ha feltételezzük, hogy az eddig épített űrjátékról beszélünk:

N ellenséges hajó megsemmisült: Gyakori, hogy ha egy játékot különböző szintekre osztasz, akkor egy szint teljesítéséhez N ellenséges hajót kell megsemmisíteni.
A hajód megsemmisült: Vannak olyan játékok, ahol elveszíted a játékot, ha a hajód megsemmisül. Egy másik gyakori megközelítés az, hogy életek fogalmát vezeted be. Minden alkalommal, amikor a hajód megsemmisül, elveszítesz egy életet. Ha minden életed elfogyott, akkor vége a játéknak.
Összegyűjtöttél N pontot: Egy másik gyakori befejezési feltétel, hogy pontokat gyűjts. Az, hogy hogyan szerzel pontokat, rajtad múlik, de gyakori, hogy pontokat rendelnek különböző tevékenységekhez, például egy ellenséges hajó megsemmisítéséhez vagy tárgyak gyűjtéséhez, amelyeket a tárgyak eldobnak, amikor megsemmisülnek.
Teljesítettél egy szintet: Ez több feltételt is magában foglalhat, például X ellenséges hajó megsemmisítését, Y pont összegyűjtését, vagy esetleg egy adott tárgy megszerzését.

Újrakezdés

Ha az emberek élvezik a játékodat, valószínűleg újra szeretnék játszani. Amikor a játék bármilyen okból véget ér, biztosíts egy lehetőséget az újrakezdésre.

✅ Gondold át, hogy milyen feltételek mellett ér véget egy játék, és hogyan ösztönöznek az újrakezdésre.

Mit kell építeni

A következő szabályokat fogod hozzáadni a játékodhoz:

A játék megnyerése. Ha az összes ellenséges hajót megsemmisítetted, megnyered a játékot. Ezenkívül jeleníts meg valamilyen győzelmi üzenetet.
Újrakezdés. Ha minden életed elfogyott, vagy megnyerted a játékot, biztosíts egy lehetőséget a játék újrakezdésére. Ne feledd! Újra kell inicializálnod a játékot, és a korábbi játékállapotot törölni kell.

Ajánlott lépések

Keresd meg azokat a fájlokat, amelyeket a your-work almappában hoztak létre számodra. Ezeknek a következőket kell tartalmazniuk:

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

A projektedet a your_work mappában indíthatod el az alábbi parancs beírásával:

cd your-work
npm start

A fenti parancs egy HTTP szervert indít a http://localhost:5000 címen. Nyiss meg egy böngészőt, és írd be ezt a címet. A játékodnak játszható állapotban kell lennie.

Tipp: hogy elkerüld a figyelmeztetéseket a Visual Studio Code-ban, szerkeszd a window.onload függvényt úgy, hogy a gameLoopId-t hívja meg (a let nélkül), és deklaráld a gameLoopId-t a fájl tetején külön: let gameLoopId;

Kód hozzáadása

Befejezési feltétel követése. Adj hozzá kódot, amely nyomon követi az ellenségek számát, vagy hogy a hős hajó megsemmisült-e, az alábbi két függvény hozzáadásával:

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

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

Logika hozzáadása az üzenetkezelőkhöz. Szerkeszd az eventEmitter-t, hogy kezelje ezeket a feltételeket:

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

Új üzenettípusok hozzáadása. Add hozzá ezeket az Üzeneteket a constants objektumhoz:
```
GAME_END_LOSS: "GAME_END_LOSS",
GAME_END_WIN: "GAME_END_WIN",
```
Újrakezdési kód hozzáadása. Adj hozzá kódot, amely újraindítja a játékot egy kiválasztott gomb megnyomásakor.
1. Figyelj az Enter billentyű lenyomására. Szerkeszd az ablakod eventListener-jét, hogy figyeljen erre a billentyűre:
```
 else if(evt.key === "Enter") {
    eventEmitter.emit(Messages.KEY_EVENT_ENTER);
  }
```
1. Újrakezdési üzenet hozzáadása. Add hozzá ezt az Üzenetet az Üzenetek konstanshoz:
```
KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
```

Játékszabályok megvalósítása. Valósítsd meg a következő játékszabályokat:

Játékos győzelmi feltétele. Ha az összes ellenséges hajót megsemmisítetted, jeleníts meg egy győzelmi üzenetet.

Először hozz létre egy displayMessage() függvényt:

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

Hozz létre egy endGame() függvényt:

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

Újrakezdési logika. Ha minden életed elfogyott, vagy megnyerted a játékot, jelenítsd meg, hogy a játék újraindítható. Ezenkívül indítsd újra a játékot, amikor az újrakezdés gombot megnyomják (te döntöd el, melyik billentyű legyen az újrakezdéshez rendelve).

Hozd létre a resetGame() függvényt:

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

Adj hozzá egy hívást az eventEmitter-hez, hogy újraindítsa a játékot az initGame()-ben:
```
eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
  resetGame();
});
```
Adj hozzá egy clear() függvényt az EventEmitter-hez:
```
clear() {
  this.listeners = {};
}
```

👽 💥 🚀 Gratulálok, Kapitány! A játékod elkészült! Szép munka! 🚀 💥 👽

🚀 Kihívás

Adj hozzá hangot! Tudsz hangot hozzáadni, hogy fokozd a játékélményt? Például, amikor egy lézer talál, vagy a hős meghal, vagy győz? Nézd meg ezt a sandboxot, hogy megtanuld, hogyan lehet hangot lejátszani JavaScript segítségével.

Előadás utáni kvíz

Áttekintés és önálló tanulás

A feladatod egy új minta játék létrehozása, ezért fedezz fel néhány érdekes játékot, hogy inspirációt kapj, milyen típusú játékot építhetnél.

Feladat

Minta játék építése

Felelősségkizárás:
Ez a dokumentum az Co-op Translator AI fordítási szolgáltatás segítségével készült. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt a professzionális, emberi fordítás igénybevétele. Nem vállalunk felelősséget a fordítás használatából eredő félreértésekért vagy téves értelmezésekért.

9.4 KiB Raw Permalink Blame History