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 uničeno sovražno ladjo 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 ž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 ob pritisku na levo in desno puščico junak premika in lahko strelja 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();
```

Implementirajte pravila igre. Implementirajte 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 vaše sprožilce dogodkov trkov:

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 in odkrijte 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, kako se število življenj zmanjšuje ob trkih s sovražniki in točke povečujejo ob streljanju sovražnikov. Odlično! Vaša igra je skoraj končana.

🚀 Izziv

Vaša koda je skoraj končana. Ali lahko predvidite 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 strojno prevajanje 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 izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo strokovno človeško prevajanje. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki izhajajo iz uporabe tega prevoda.

7.2 KiB Raw Permalink Blame History