10 KiB

Raw Blame History Unescape Escape

Űrjáték építése 5. rész: Pontozás és életek

Előadás előtti kvíz

Készen állsz arra, hogy az űrjátékod valódi játékká váljon? Adjunk hozzá pontozási rendszert és életek kezelését – ezek azok az alapvető mechanikák, amelyek az olyan korai arcade játékokat, mint a Space Invaders, egyszerű bemutatókból függőséget okozó szórakozássá alakították. Itt válik a játékod igazán játszhatóvá.

Szöveg megjelenítése a képernyőn - A játékod hangja

Ahhoz, hogy megjelenítsük a pontszámot, meg kell tanulnunk, hogyan lehet szöveget megjeleníteni a vásznon. A fillText() metódus az elsődleges eszközöd ehhez – ugyanaz a technika, amelyet a klasszikus arcade játékok használtak a pontszámok és állapotinformációk megjelenítésére.

Teljes mértékben irányíthatod a szöveg megjelenését:

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

✅ Merülj el mélyebben a szöveg hozzáadása a vászonhoz témában – meglepődhetsz, milyen kreatív lehetsz a betűtípusokkal és stílusokkal!

Életek - Több mint egy szám

A játéktervezésben az "élet" a játékos hibázási lehetőségét jelenti. Ez a koncepció a flippergépekig nyúlik vissza, ahol több golyót kaptál a játékhoz. Az olyan korai videojátékokban, mint az Asteroids, az életek lehetőséget adtak a játékosoknak arra, hogy kockáztassanak és tanuljanak a hibáikból.

A vizuális megjelenítés rendkívül fontos – ha hajó ikonokat jelenítünk meg a "Életek: 3" helyett, az azonnali vizuális felismerést eredményez, hasonlóan ahhoz, ahogy a korai arcade gépek ikonográfiát használtak a nyelvi akadályok leküzdésére.

A játék jutalmazási rendszerének felépítése

Most megvalósítjuk azokat az alapvető visszacsatolási rendszereket, amelyek a játékosokat lekötik:

Pontozási rendszer: Minden megsemmisített ellenséges hajó 100 pontot ér (a kerek számokat könnyebb fejben kiszámolni). A pontszám a bal alsó sarokban jelenik meg.
Élet számláló: A hősöd három élettel kezd – ez egy korai arcade játékok által meghatározott szabvány, amely egyensúlyt teremt a kihívás és a játszhatóság között. Minden ütközés egy ellenséggel egy életet vesz el. A fennmaradó életeket a jobb alsó sarokban hajó ikonokkal jelenítjük meg .

Kezdjünk neki!

Először állítsd be a munkaterületedet. Navigálj a your-work almappában található fájlokhoz. Ezeket a fájlokat kell látnod:

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

A játék teszteléséhez indítsd el a fejlesztői szervert a your_work mappából:

cd your-work
npm start

Ez egy helyi szervert futtat a http://localhost:5000 címen. Nyisd meg ezt a címet a böngésződben, hogy lásd a játékot. Teszteld a vezérlőket a nyílbillentyűkkel, és próbálj meg ellenségekre lőni, hogy megbizonyosodj róla, minden működik.

Ideje kódolni!

Szerezd be a szükséges vizuális elemeket. Másold a life.png elemet a solution/assets/ mappából a your-work mappába. Ezután add hozzá a lifeImg-t a window.onload függvényedhez:
```
lifeImg = await loadTexture("assets/life.png");
```

Ne felejtsd el hozzáadni a lifeImg-t az eszközök listájához:

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

Állítsd be a játék változóit. Adj hozzá kódot, amely nyomon követi az összesített pontszámot (0-ról indul) és a fennmaradó életeket (3-ról indul). Ezeket megjelenítjük a képernyőn, hogy a játékosok mindig tudják, hol állnak.

Valósítsd meg az ütközésérzékelést. Bővítsd ki az updateGameObjects() függvényedet, hogy érzékelje, amikor az ellenségek ütköznek a hősöddel:

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

Adj élet- és pontszámkövetést a hősödhöz.

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

Mutasd meg ezeket az értékeket a játékosnak. Hozz létre függvényeket, amelyek ezeket az értékeket megjelenítik 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);
}

Kapcsold be mindent a játék ciklusába. Add hozzá ezeket a függvényeket a window.onload függvényedhez közvetlenül az updateGameObjects() után:
```
drawPoints();
drawLife();
```

Valósítsd meg a játék következményeit és jutalmait. Most hozzáadjuk azokat a visszacsatolási rendszereket, amelyek értelmet adnak a játékos cselekedeteinek:
1. Ütközések életeket vesznek el. Minden alkalommal, amikor a hősöd összeütközik egy ellenséggel, veszítened kell egy életet.
  
  Add hozzá ezt a metódust a Hero osztályhoz:
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```
2. Ellenségek lelövése pontokat ér. Minden sikeres találat 100 pontot ér, azonnali pozitív visszacsatolást nyújtva a pontos lövésért.
  
  Bővítsd ki a Hero osztályt ezzel az inkrementáló metódussal:
```
  incrementPoints() {
    this.points += 100;
  }
```
  Most kapcsolódj ezekhez a függvényekhez az ütközési eseményeknél:
```
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();
});
```

✅ Kíváncsi vagy más, JavaScript és Canvas segítségével készült játékokra? Fedezz fel néhányat – meg fogsz lepődni, mi minden lehetséges!

Miután megvalósítottad ezeket a funkciókat, teszteld a játékot, hogy lásd a teljes visszacsatolási rendszert működés közben. Látnod kell az élet ikonokat a jobb alsó sarokban, a pontszámot a bal alsó sarokban, és figyelheted, ahogy az ütközések csökkentik az életeket, míg a sikeres lövések növelik a pontszámot.

A játékod most már rendelkezik azokkal az alapvető mechanikákkal, amelyek a korai arcade játékokat olyan vonzóvá tették – egyértelmű célokkal, azonnali visszacsatolással és jelentős következményekkel a játékos cselekedeteiért.

GitHub Copilot Agent kihívás 🚀

Használd az Agent módot a következő kihívás teljesítéséhez:

Leírás: Fejleszd az űrjáték pontozási rendszerét egy magas pontszám funkcióval, amely tartós tárolást és bónusz pontozási mechanizmusokat valósít meg.

Feladat: Hozz létre egy magas pontszám rendszert, amely elmenti a játékos legjobb pontszámát a localStorage-ba. Adj bónusz pontokat az egymást követő ellenséges találatokért (kombó rendszer), és valósíts meg különböző pontértékeket a különböző ellenségtípusokhoz. Tartsd vizuálisan jelezve, amikor a játékos új magas pontszámot ér el, és jelenítsd meg az aktuális magas pontszámot a játék képernyőjén.

🚀 Kihívás

Most már van egy működő játékod pontozással és életekkel. Gondold át, milyen további funkciók javíthatnák a játékos élményét.

Előadás utáni kvíz

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

Szeretnél többet felfedezni? Kutass különböző megközelítéseket a játék pontozási és élet rendszereihez. Vannak lenyűgöző játék motorok, mint például a PlayFab, amelyek kezelik a pontozást, ranglistákat és a játékosok fejlődését. Hogyan emelhetné egy ilyen integráció a játékodat a következő szintre?

Feladat

Építs egy pontozási játékot

Felelősség kizárása:
Ez a dokumentum az Co-op Translator AI fordítási szolgáltatás 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.

10 KiB Raw Blame History Unescape Escape