7.2 KiB

Raw Permalink 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 pelin pisteet voidaan näyttää ruudulla, sinun täytyy tietää, miten teksti sijoitetaan ruudulle. Vastaus on käyttämällä fillText()-metodia canvas-objektissa. Voit myös hallita muita ominaisuuksia, kuten mitä fonttia käytetään, 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ä omasta versiostasi 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ää graafisen esityksen tästä, kuten pienet alukset tai sydämet numeron sijaan.

Mitä rakennetaan

Lisätään peliin seuraavat ominaisuudet:

Pelin pisteet: Jokaisesta tuhotusta vihollisaluksesta sankarille tulisi antaa pisteitä, esimerkiksi 100 pistettä per alus. Pelin pisteet tulisi näyttää vasemmassa alakulmassa.
Elämä: Aluksellasi on kolme elämää. Menetät yhden elämän aina, kun vihollisalus törmää sinuun. Elämäpisteet tulisi näyttää oikeassa alakulmassa ja niiden tulisi koostua seuraavasta grafiikasta .

Suositellut vaiheet

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

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

Aloita projektisi your_work-kansiossa kirjoittamalla:

cd your-work
npm start

Yllä oleva käynnistää HTTP-palvelimen osoitteessa http://localhost:5000. Avaa selain ja syötä kyseinen 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ä (0) ja jäljellä olevia elämiä (3), ja näytä nämä pisteet 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ää elämä ja pisteet.

Alusta muuttujat. Aseta elämä ja pisteet this.cooldown = 0-kohdan alle Hero-luokassa:
```
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ää pelin pisteisiin 100 pistettä.

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

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

Lisää nämä funktiot törmäystapahtumien lähettäjiin:

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ä/Canvasilla. Mitkä ovat niiden yhteiset piirteet?

Kun olet saanut tämän työn valmiiksi, sinun pitäisi nähdä pienet "elämä"-alukset oikeassa alakulmassa, pisteet vasemmassa alakulmassa, ja sinun pitäisi nähdä elämäsi vähenevän, kun törmäät vihollisiin, sekä pisteiden kasvavan, kun ammut vihollisia. Hyvä työ! Pelisi on melkein valmis.

🚀 Haaste

Koodisi on melkein valmis. Voitko kuvitella seuraavat askeleesi?

Jälkikysely

Kertaus ja itseopiskelu

Tutki tapoja, joilla voit lisätä ja vähentää pelin pisteitä ja elämiä. On olemassa mielenkiintoisia pelimoottoreita, kuten PlayFab. Miten yhden näistä 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. Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.

7.2 KiB Raw Permalink Blame History