7.2 KiB

Raw Blame History

Rakenna avaruuspeli, osa 5: Pisteet ja elämät

Ennakkokysely

Tässä oppitunnissa opit lisäämään pisteytyksen peliin ja laskemaan elämiä.

Piirrä teksti ruudulle

Jotta voit näyttää pelin pisteet ruudulla, sinun täytyy tietää, miten teksti sijoitetaan ruudulle. Ratkaisu on käyttää fillText()-metodia canvas-objektissa. Voit myös hallita muita ominaisuuksia, kuten fonttia, tekstin väriä ja sen kohdistusta (vasen, oikea, keskitetty). Alla on koodia, joka piirtää tekstiä ruudulle.

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

✅ Lue lisää tekstin lisäämisestä canvasille, ja voit halutessasi tehdä omastasi näyttävämmän!

Elämä pelikonseptina

Elämä pelissä on vain numero. Avaruuspeliä ajatellen on yleistä antaa tietty määrä elämiä, jotka vähenevät yksi kerrallaan, kun aluksesi ottaa vahinkoa. On mukavaa, jos voit näyttää tämän graafisesti, esimerkiksi pienillä aluksilla tai sydämillä numeron sijaan.

Mitä rakennetaan

Lisätään peliin seuraavat ominaisuudet:

Pelipisteet: Jokaisesta tuhotusta vihollisaluksesta sankari saa pisteitä, esimerkiksi 100 pistettä per alus. Pelipisteet tulisi näyttää vasemmassa alakulmassa.
Elämät: Aluksellasi on kolme elämää. Menetät yhden elämän aina, kun vihollisalus törmää sinuun. Elämät tulisi näyttää oikeassa alakulmassa ja niiden tulisi koostua seuraavasta graafisesta elementistä .

Suositellut vaiheet

Etsi tiedostot, jotka on luotu sinulle your-work-alikansioon. Sen pitäisi sisältää seuraavat:

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

Aloitat projektisi your_work-kansiosta kirjoittamalla:

cd your-work
npm start

Yllä oleva komento käynnistää HTTP-palvelimen osoitteessa http://localhost:5000. Avaa selain ja syötä tämä osoite. Tällä hetkellä sen pitäisi näyttää sankari ja kaikki viholliset, ja kun painat vasenta ja oikeaa nuolinäppäintä, sankari liikkuu ja voi ampua vihollisia.

Lisää koodia

Kopioi tarvittavat resurssit solution/assets/-kansiosta your-work-kansioon; lisää life.png-resurssi. Lisää lifeImg window.onload-funktioon:
```
lifeImg = await loadTexture("assets/life.png");
```

Lisää lifeImg resurssien listaan:

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

Lisää muuttujia. Lisää koodi, joka edustaa kokonaispisteitäsi (0) ja jäljellä olevia elämiä (3), ja näytä nämä arvot ruudulla.

Laajenna updateGameObjects()-funktiota. Laajenna updateGameObjects()-funktiota käsittelemään vihollisten törmäyksiä:

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

Lisää life ja points.

Alusta muuttujat. Lisää this.cooldown = 0-kohdan alle Hero-luokassa elämät ja pisteet:
```
this.life = 3;
this.points = 0;
```

Piirrä muuttujat ruudulle. Näytä nämä arvot ruudulla:

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

Lisää metodit pelisilmukkaan. Varmista, että lisäät nämä funktiot window.onload-funktioon updateGameObjects()-kohdan alle:
```
drawPoints();
drawLife();
```

Toteuta pelisäännöt. Toteuta seuraavat pelisäännöt:

Jokaisesta sankarin ja vihollisen törmäyksestä vähennä yksi elämä.

Laajenna Hero-luokkaa tekemään tämä vähennys:
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```

Jokaisesta laserista, joka osuu viholliseen, lisää pelipisteisiin 100 pistettä.

Laajenna Hero-luokkaa tekemään tämä lisäys:

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

Lisää nämä funktiot törmäystapahtumien käsittelijöihin:

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

✅ Tee hieman tutkimusta ja selvitä, mitä muita pelejä on luotu JavaScriptillä ja Canvasilla. Mitkä ovat niiden yhteiset piirteet?

Kun olet saanut tämän valmiiksi, sinun pitäisi nähdä pienet "elämä"-alukset oikeassa alakulmassa, pisteet vasemmassa alakulmassa, ja elämien määrä vähenee, kun törmäät vihollisiin, ja pisteet kasvavat, kun ammut vihollisia. Hienoa työtä! Pelisi on melkein valmis.

🚀 Haaste

Koodisi on melkein valmis. Mitä seuraavaksi voisit tehdä?

Jälkikysely

Kertaus ja itseopiskelu

Tutki tapoja, joilla voit lisätä ja vähentää pelipisteitä ja elämiä. On olemassa mielenkiintoisia pelimoottoreita, kuten PlayFab. Miten tällaisen moottorin käyttö voisi parantaa peliäsi?

Tehtävä

Rakenna pisteytyspeli

Vastuuvapauslauseke:
Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua Co-op Translator. Pyrimme tarkkuuteen, mutta huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulee pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskääntämistä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.

7.2 KiB Raw Blame History