9.1 KiB

Raw Blame History

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

Ennakkoquiz

Valmis tekemään avaruuspelistäsi oikean pelin? Lisätään pisteiden kerääminen ja elämien hallinta - ydintoiminnot, jotka muuttivat varhaiset arcade-pelit, kuten Space Invaders, yksinkertaisista demonstraatioista koukuttavaksi viihteeksi. Tässä vaiheessa pelisi muuttuu todella pelattavaksi.

Tekstin piirtäminen ruudulle - pelisi ääni

Näyttääksemme pisteesi, meidän täytyy oppia renderöimään tekstiä canvas-elementille. fillText()-metodi on päätyökalusi tähän - se on sama tekniikka, jota käytettiin klassisissa arcade-peleissä pisteiden ja tilatietojen näyttämiseen.

Sinulla on täydellinen hallinta tekstin ulkoasusta:

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

✅ Sukella syvemmälle tekstin lisäämiseen canvas-elementille - saatat yllättyä, kuinka luovaksi voit ryhtyä fonttien ja tyylien kanssa!

Elämät - enemmän kuin vain numero

Pelisuunnittelussa "elämä" edustaa pelaajan virhemarginaalia. Tämä konsepti juontaa juurensa flipperikoneista, joissa pelaajalla oli useita palloja pelattavaksi. Varhaisissa videopeleissä, kuten Asteroids, elämät antoivat pelaajille luvan ottaa riskejä ja oppia virheistään.

Visuaalinen esitys on erittäin tärkeää - alusten kuvakkeiden näyttäminen pelkän "Elämät: 3" sijaan luo välittömän visuaalisen tunnistettavuuden, aivan kuten varhaiset arcade-kaapit käyttivät ikonografiaa viestinnässä kielimuurien yli.

Pelin palkitsemisjärjestelmän rakentaminen

Nyt toteutamme keskeiset palautemekanismit, jotka pitävät pelaajat mukana:

Pistejärjestelmä: Jokainen tuhottu vihollisalus antaa 100 pistettä (pyöreät luvut ovat helpompia pelaajille laskea mielessään). Pisteet näytetään vasemmassa alakulmassa.
Elämälaskuri: Sankarisi aloittaa kolmella elämällä - standardi, jonka varhaiset arcade-pelit asettivat tasapainottamaan haastetta ja pelattavuutta. Jokainen törmäys viholliseen maksaa yhden elämän. Näytämme jäljellä olevat elämät oikeassa alakulmassa aluksen kuvakkeilla .

Aloitetaan rakentaminen!

Ensiksi, valmistele työtilasi. Siirry tiedostoihin your-work-alikansiossa. Sinun pitäisi nähdä nämä tiedostot:

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

Testataksesi peliäsi, käynnistä kehityspalvelin your_work-kansiosta:

cd your-work
npm start

Tämä käynnistää paikallisen palvelimen osoitteessa http://localhost:5000. Avaa tämä osoite selaimessasi nähdäksesi pelisi. Testaa ohjaimia nuolinäppäimillä ja kokeile ampua vihollisia varmistaaksesi, että kaikki toimii.

Koodauksen aika!

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

Älä unohda lisätä lifeImg-kuvaa resurssilistaan:

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

Aseta pelin muuttujat. Lisää koodi, joka seuraa kokonaispisteitäsi (alkaen 0) ja jäljellä olevia elämiäsi (alkaen 3). Näytämme nämä ruudulla, jotta pelaajat tietävät aina tilanteensa.

Toteuta törmäysten tunnistus. Laajenna updateGameObjects()-funktiotasi tunnistamaan, kun viholliset törmäävät sankariisi:

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

Lisää elämien ja pisteiden seuranta sankarillesi.

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

Näytä nämä arvot pelaajalle. Luo funktiot, jotka piirtävät nämä arvot ruudulle:

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

Liitä kaikki pelisilmukkaan. Lisää nämä funktiot window.onload-funktioon heti updateGameObjects()-kohdan jälkeen:
```
drawPoints();
drawLife();
```

Toteuta pelin seuraukset ja palkinnot. Nyt lisätään palautemekanismit, jotka tekevät pelaajan toimista merkityksellisiä:
1. Törmäykset maksavat elämiä. Joka kerta, kun sankarisi törmää viholliseen, menetät yhden elämän.
  
  Lisää tämä metodi Hero-luokkaasi:
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```
2. Vihollisten ampuminen ansaitsee pisteitä. Jokainen onnistunut osuma antaa 100 pistettä, tarjoten välitöntä positiivista palautetta tarkasta ampumisesta.
  
  Laajenna Hero-luokkaasi tällä lisäysmetodilla:
```
  incrementPoints() {
    this.points += 100;
  }
```
  Nyt yhdistä nämä funktiot törmäystapahtumiin:
```
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();
});
```

✅ Kiinnostunut muista JavaScriptillä ja Canvasilla tehdyistä peleistä? Tutki lisää - saatat yllättyä siitä, mitä kaikkea on mahdollista tehdä!

Kun olet toteuttanut nämä ominaisuudet, testaa peliäsi nähdäksesi täydellisen palautemekanismin toiminnassa. Sinun pitäisi nähdä elämän kuvakkeet oikeassa alakulmassa, pisteesi vasemmassa alakulmassa, ja huomata, kuinka törmäykset vähentävät elämiä ja onnistuneet laukaukset lisäävät pisteitä.

Pelissäsi on nyt olennaiset mekanismit, jotka tekivät varhaisista arcade-peleistä niin koukuttavia - selkeät tavoitteet, välitön palaute ja merkitykselliset seuraukset pelaajan toimille.

GitHub Copilot Agent -haaste 🚀

Käytä Agent-tilaa suorittaaksesi seuraavan haasteen:

Kuvaus: Paranna avaruuspelin pistejärjestelmää toteuttamalla ennätyspisteiden ominaisuus pysyvällä tallennuksella ja bonuspisteiden mekanismilla.

Tehtävä: Luo ennätyspistejärjestelmä, joka tallentaa pelaajan parhaan tuloksen localStorageen. Lisää bonuspisteitä peräkkäisistä vihollistaposta (kombosysteemi) ja toteuta erilaiset pistemäärät eri vihollistyypeille. Lisää visuaalinen indikaattori, kun pelaaja saavuttaa uuden ennätyspisteen, ja näytä nykyinen ennätyspiste peliruudulla.

🚀 Haaste

Sinulla on nyt toimiva peli pisteiden ja elämien kanssa. Mieti, mitkä lisäominaisuudet voisivat parantaa pelaajakokemusta.

Jälkiquiz

Kertaus ja itseopiskelu

Haluatko tutkia lisää? Tutki erilaisia lähestymistapoja pelin piste- ja elämäsysteemeihin. On olemassa kiehtovia pelimoottoreita, kuten PlayFab, jotka käsittelevät pisteitä, tulostaulukoita ja pelaajien etenemistä. Miten tällaisen integrointi voisi viedä pelisi seuraavalle tasolle?

Tehtävä

Rakenna pistepeli

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ä.

9.1 KiB Raw Blame History