7.3 KiB

Raw Blame History

Bouw een Ruimtespel Deel 5: Score en Levens

Pre-Les Quiz

In deze les leer je hoe je een score toevoegt aan een spel en levens berekent.

Tekst op het scherm weergeven

Om een spelscore op het scherm te kunnen weergeven, moet je weten hoe je tekst op het scherm plaatst. Het antwoord is het gebruik van de methode fillText() op het canvas-object. Je kunt ook andere aspecten aanpassen, zoals welk lettertype je wilt gebruiken, de kleur van de tekst en zelfs de uitlijning (links, rechts, midden). Hieronder staat wat code die tekst op het scherm tekent.

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

✅ Lees meer over hoe je tekst toevoegt aan een canvas, en maak jouw versie gerust wat mooier!

Levens, als spelconcept

Het concept van levens in een spel is simpelweg een getal. In de context van een ruimtespel is het gebruikelijk om een aantal levens toe te wijzen die één voor één worden afgetrokken wanneer je schip schade oploopt. Het is leuk als je een grafische weergave hiervan kunt tonen, zoals kleine scheepjes of hartjes in plaats van een getal.

Wat gaan we bouwen?

Laten we het volgende aan je spel toevoegen:

Spelscore: Voor elk vijandelijk schip dat wordt vernietigd, moet de held punten krijgen. We stellen 100 punten per schip voor. De spelscore moet linksonder worden weergegeven.
Levens: Je schip heeft drie levens. Je verliest een leven elke keer dat een vijandelijk schip met je botst. Een levensscore moet rechtsonder worden weergegeven en bestaan uit de volgende afbeelding .

Aanbevolen stappen

Zoek de bestanden die voor je zijn aangemaakt in de submap your-work. Deze map zou het volgende moeten bevatten:

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

Start je project in de map your_work door het volgende in te typen:

cd your-work
npm start

Bovenstaande start een HTTP-server op het adres http://localhost:5000. Open een browser en voer dat adres in. Op dit moment zou het de held en alle vijanden moeten weergeven, en als je op de linker- en rechterpijltjes drukt, beweegt de held en kan hij vijanden neerschieten.

Code toevoegen

Kopieer de benodigde assets van de map solution/assets/ naar de map your-work; je voegt een life.png asset toe. Voeg de lifeImg toe aan de window.onload functie:
```
lifeImg = await loadTexture("assets/life.png");
```

Voeg de lifeImg toe aan de lijst met assets:

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

Voeg variabelen toe. Voeg code toe die je totale score (0) en resterende levens (3) vertegenwoordigt, en geef deze scores weer op het scherm.

Breid de functie updateGameObjects() uit. Breid de functie updateGameObjects() uit om vijandelijke botsingen af te handelen:

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

Voeg levens en punten toe.

Initialiseer variabelen. Onder this.cooldown = 0 in de Hero-klasse, stel levens en punten in:
```
this.life = 3;
this.points = 0;
```

Teken variabelen op het scherm. Geef deze waarden weer op het scherm:

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

Voeg methoden toe aan de gameloop. Zorg ervoor dat je deze functies toevoegt aan je window.onload functie onder updateGameObjects():
```
drawPoints();
drawLife();
```

Implementeer spelregels. Implementeer de volgende spelregels:

Voor elke botsing tussen held en vijand, trek een leven af.

Breid de Hero-klasse uit om deze aftrekking te doen:
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```

Voor elke laser die een vijand raakt, verhoog de spelscore met 100 punten.

Breid de Hero-klasse uit om deze verhoging te doen:

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

Voeg deze functies toe aan je Collision Event Emitters:

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

✅ Doe wat onderzoek naar andere spellen die zijn gemaakt met JavaScript/Canvas. Wat zijn hun gemeenschappelijke kenmerken?

Aan het einde van dit werk zou je de kleine 'leven'-scheepjes rechtsonder moeten zien, punten linksonder, en je zou moeten zien dat je levens afnemen wanneer je met vijanden botst en je punten toenemen wanneer je vijanden neerschiet. Goed gedaan! Je spel is bijna klaar.

🚀 Uitdaging

Je code is bijna compleet. Kun je je volgende stappen bedenken?

Post-Les Quiz

Post-les quiz

Review & Zelfstudie

Onderzoek enkele manieren waarop je spelscores en levens kunt verhogen en verlagen. Er zijn interessante game-engines zoals PlayFab. Hoe zou het gebruik van een van deze je spel kunnen verbeteren?

Opdracht

Bouw een Scoring Game

Disclaimer:
Dit document is vertaald met behulp van de AI-vertalingsservice Co-op Translator. Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.

7.3 KiB Raw Blame History