History

leestott c0ca49b2cc 🌐 Update translations via Co-op Translator		3 weeks ago
..
solution	🌐 Update translations via Co-op Translator	3 weeks ago
your-work	🌐 Update translations via Co-op Translator	3 weeks ago
README.md	🌐 Update translations via Co-op Translator	3 weeks ago
assignment.md	🌐 Update translations via Co-op Translator	3 weeks ago

README.md

Ű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 egy játékhoz, és hogyan számítsd ki 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. Szabályozhatod más aspektusokat is, 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ód példát mutat arra, hogyan rajzolj szöveget 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 adj szöveget egy canvashoz, és nyugodtan tedd a sajátodat még látványosabbá!

É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 rendelünk hozzá, amelyeket egyenként vonunk le, 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, nem csak egy számmal.

Mit kell elkészíteni?

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

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 pontszá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 hoztak 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 begépelésével:

cd your-work
npm start

Ez elindít egy HTTP szervert 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 a 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 reprezentálja a teljes pontszámot (0) és a megmaradt életeket (3), és jelenítsd meg ezeket a pontszámokat a képernyőn.

Bővítsd ki az updateGameObjects() függvényt. Bővítsd ki 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á életeket és pontokat.

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

Rajzold ki a változókat a képernyőre. Rajzold ki ezeket az értékeket a képernyőre:

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ék ciklushoz. Győződj meg róla, hogy hozzáadtad ezeket a függvényeket 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 ki a Hero osztályt, hogy elvégezze ezt a levonást:
```
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 ki a Hero osztályt, hogy elvégezze ezt a növelést:

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

✅ Végezz egy kis kutatást, hogy felfedezd, milyen más játékokat készítettek JavaScript/Canvas segítségével. Mik a közös jellemzőik?

A munka végére látnod kell a kis "élet" hajókat a jobb alsó sarokban, a pontokat a bal alsó sarokban, és látnod kell, ahogy az életek száma csökken, amikor ütközöl az ellenségekkel, és a pontszám növekszik, 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 a következő lépéseket?

Előadás utáni kvíz

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

Kutass néhány módszert, amelyekkel növelheted vagy csökkentheted 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

Építs egy pontszám alapú játékot

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 professzionális, emberi fordítást igénybe venni. 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.