7.9 KiB

Raw Permalink Blame History

Űrjáték készítése 5. rész: Pontszám és életek

Előadás előtti kvíz

Ebben a leckében megtanulod, hogyan adj pontszámot a játékhoz, és hogyan számold az életeket.

Szöveg megjelenítése a képernyőn

Ahhoz, hogy a játék pontszámát megjelenítsd a képernyőn, tudnod kell, hogyan helyezz el szöveget a képernyőn. A megoldás a fillText() metódus használata a canvas objektumon. Ezen kívül más tulajdonságokat is szabályozhatsz, például a betűtípust, a szöveg színét és az igazítást (balra, jobbra, középre). Az alábbi kódrészlet példát mutat arra, hogyan lehet szöveget rajzolni a képernyőre.

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

✅ Olvass többet arról, hogyan adhatsz szöveget egy canvashoz, és bátran tedd a sajátodat még látványosabbá!

Az élet, mint játékkoncepció

Az élet fogalma egy játékban csupán egy szám. Egy űrjáték kontextusában gyakori, hogy egy meghatározott számú életet adunk, amelyek egyenként csökkennek, amikor a hajód sérülést szenved. Jó, ha ezt grafikusan is meg tudod jeleníteni, például minihajókkal vagy szívekkel a szám helyett.

Mit kell elkészíteni?

Adjuk hozzá a következőket a játékodhoz:

Játék pontszám: Minden ellenséges hajó megsemmisítése után a hősnek pontokat kell kapnia, javasoljuk, hogy hajónként 100 pontot. A játék pontszámát a bal alsó sarokban kell megjeleníteni.
Élet: A hajódnak három élete van. Minden alkalommal, amikor egy ellenséges hajó neked ütközik, elveszítesz egy életet. Az életek számát a jobb alsó sarokban kell megjeleníteni, és a következő grafikából kell állnia: .

Ajánlott lépések

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

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

Indítsd el a projektedet a your_work mappában 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. Jelenleg a hős és az összes ellenség megjelenik, és amikor a bal és jobb nyilakat lenyomod, a hős mozog, és le tudja lőni az ellenségeket.

Kód hozzáadása

Másold át a szükséges eszközöket a solution/assets/ mappából a your-work mappába; hozzá kell adnod egy life.png eszközt. Add hozzá a lifeImg-t a window.onload függvényhez:
```
lifeImg = await loadTexture("assets/life.png");
```

Add hozzá a lifeImg-t az eszközök listájához:

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

Adj hozzá változókat. Adj hozzá kódot, amely a teljes pontszámot (0) és a hátralévő életeket (3) képviseli, és jelenítsd meg ezeket a képernyőn.

Bővítsd az updateGameObjects() függvényt. Bővítsd az updateGameObjects() függvényt, hogy kezelje az ellenséges ütközéseket:

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

Adj hozzá életet és pontokat.

Inicializáld a változókat. A this.cooldown = 0 alatt a Hero osztályban állítsd be az életet és a pontokat:
```
this.life = 3;
this.points = 0;
```

Rajzold ki a változókat a képernyőre. Jelenítsd meg ezeket az értékeket a képernyőn:

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

Adj hozzá metódusokat a játékciklushoz. Győződj meg róla, hogy ezeket a függvényeket hozzáadod a window.onload függvényhez az updateGameObjects() alatt:
```
drawPoints();
drawLife();
```

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

Minden hős és ellenség ütközés esetén vonj le egy életet.

Bővítsd a Hero osztályt, hogy ezt a levonást elvégezze:
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```

Minden lézer, amely eltalál egy ellenséget, növelje a játék pontszámát 100 ponttal.

Bővítsd a Hero osztályt, hogy ezt a növelést elvégezze:

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

Add hozzá ezeket a függvényeket az ütközési eseménykibocsátókhoz:

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

✅ Kutass egy kicsit, hogy felfedezd, milyen más játékokat készítettek JavaScript/Canvas használatával. Mik a közös jellemzőik?

A munka végére a jobb alsó sarokban kis "élet" hajókat kell látnod, a bal alsó sarokban a pontszámot, és látnod kell, ahogy az életek száma csökken, amikor ütközöl az ellenségekkel, és a pontszámod nő, amikor lelövöd az ellenségeket. Szép munka! A játékod majdnem kész.

🚀 Kihívás

A kódod majdnem kész. El tudod képzelni, mik lehetnek a következő lépések?

Előadás utáni kvíz

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

Kutatásokat végezhetsz arról, hogyan lehet növelni és csökkenteni a játék pontszámát és életeit. Vannak érdekes játékmotorok, mint például a PlayFab. Hogyan javíthatná ezek használata a játékodat?

Feladat

Pontszám alapú játék készítése

Felelősség kizárása:
Ez a dokumentum az AI fordítási szolgáltatás Co-op Translator segítségével lett lefordítva. 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 professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.

7.9 KiB Raw Permalink Blame History