7.2 KiB

Raw Permalink Blame History

Zgradite vesoljsko igro, 5. del: Točkovanje in življenja

Predhodni kviz

V tej lekciji se boste naučili, kako dodati točkovanje v igro in izračunati življenja.

Risanje besedila na zaslon

Da bi lahko prikazali rezultat igre na zaslonu, morate vedeti, kako postaviti besedilo na zaslon. Odgovor je uporaba metode fillText() na objektu canvas. Prav tako lahko nadzorujete druge vidike, kot so izbira pisave, barva besedila in celo poravnava (levo, desno, sredina). Spodaj je nekaj kode, ki riše besedilo na zaslon.

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

✅ Preberite več o dodajanju besedila na canvas in poskrbite, da bo vaše videti še bolj privlačno!

Življenje kot koncept v igri

Koncept življenja v igri je zgolj številka. V kontekstu vesoljske igre je običajno dodeliti določeno število življenj, ki se zmanjšujejo eno za drugim, ko vaša ladja utrpi škodo. Lepo je, če lahko to prikažete grafično, na primer z mini ladjami ali srčki, namesto s številko.

Kaj bomo zgradili

Dodajmo naslednje elemente v vašo igro:

Rezultat igre: Za vsako sovražno ladjo, ki jo uničite, naj junak prejme nekaj točk, predlagamo 100 točk na ladjo. Rezultat igre naj bo prikazan v spodnjem levem kotu.
Življenje: Vaša ladja ima tri življenja. Izgubite eno življenje vsakič, ko sovražna ladja trči v vas. Število življenj naj bo prikazano v spodnjem desnem kotu in naj bo sestavljeno iz naslednje grafike .

Priporočeni koraki

Poiščite datoteke, ki so bile ustvarjene za vas v podmapi your-work. Vsebujejo naslednje:

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

Začnite svoj projekt v mapi your_work tako, da vnesete:

cd your-work
npm start

Zgornji ukaz bo zagnal HTTP strežnik na naslovu http://localhost:5000. Odprite brskalnik in vnesite ta naslov. Trenutno bi moral prikazati junaka in vse sovražnike, ter omogočiti premikanje junaka z levo in desno puščico ter streljanje na sovražnike.

Dodajanje kode

Kopirajte potrebne vire iz mape solution/assets/ v mapo your-work; dodali boste datoteko life.png. Dodajte lifeImg v funkcijo window.onload:
```
lifeImg = await loadTexture("assets/life.png");
```

Dodajte lifeImg na seznam virov:

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

Dodajte spremenljivke. Dodajte kodo, ki predstavlja vaš skupni rezultat (0) in preostala življenja (3), ter prikažite te vrednosti na zaslonu.

Razširite funkcijo updateGameObjects(). Razširite funkcijo updateGameObjects(), da obravnava trke s sovražniki:

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

Dodajte življenje in točke.

Inicializirajte spremenljivke. Pod this.cooldown = 0 v razredu Hero nastavite življenje in točke:
```
this.life = 3;
this.points = 0;
```

Narišite spremenljivke na zaslon. Prikažite te vrednosti na zaslonu:

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

Dodajte metode v zanko igre. Poskrbite, da dodate te funkcije v funkcijo window.onload pod updateGameObjects():
```
drawPoints();
drawLife();
```

Uvedite pravila igre. Uvedite naslednja pravila igre:

Za vsak trk junaka in sovražnika odštejte eno življenje.

Razširite razred Hero, da izvedete to odštevanje:

decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}

Za vsak laser, ki zadene sovražnika, povečajte rezultat igre za 100 točk.

Razširite razred Hero, da izvedete to povečanje:

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

Dodajte te funkcije v sprožilce dogodkov za trke:

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

✅ Raziskujte, da odkrijete druge igre, ki so ustvarjene z uporabo JavaScript/Canvas. Kakšne so njihove skupne značilnosti?

Ko zaključite delo, bi morali videti majhne ladje 'življenja' v spodnjem desnem kotu, točke v spodnjem levem kotu, ter opaziti zmanjšanje števila življenj ob trkih s sovražniki in povečanje točk ob streljanju na sovražnike. Odlično! Vaša igra je skoraj končana.

🚀 Izziv

Vaša koda je skoraj končana. Ali si lahko zamislite naslednje korake?

Zaključni kviz

Pregled in samostojno učenje

Raziskujte načine, kako lahko povečujete in zmanjšujete rezultate igre ter življenja. Obstajajo zanimivi igralni pogoni, kot je PlayFab. Kako bi uporaba enega od teh izboljšala vašo igro?

Naloga

Zgradite igro s točkovanjem

Omejitev odgovornosti:
Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco Co-op Translator. Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna napačna razumevanja ali napačne interpretacije, ki bi nastale zaradi uporabe tega prevoda.

7.2 KiB Raw Permalink Blame History