7.3 KiB

Raw Permalink Blame History

Bouw een Ruimtespel Deel 5: Score en Levens

Pre-Lecture 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 tonen, moet je weten hoe je tekst op het scherm plaatst. Het antwoord is het gebruik van de fillText()-methode op het canvas-object. Je kunt ook andere aspecten regelen, zoals welk lettertype je gebruikt, 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 voel je vrij om het er mooier uit te laten zien!

Leven, als spelconcept

Het concept van een leven 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 dit grafisch kunt weergeven, bijvoorbeeld met mini-schepen 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

Hiermee start je 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 toon deze scores op het scherm.

Breid de updateGameObjects()-functie uit. Breid de updateGameObjects()-functie 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 life en points toe.

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

Teken variabelen op het scherm. Teken deze waarden 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'-schepen rechtsonder moeten zien, punten linksonder, en je zou je levensaantal moeten zien afnemen wanneer je met vijanden botst en je punten zien 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-Lecture Quiz

Post-lecture 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 Scoringsspel

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 zijn oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.

7.3 KiB Raw Permalink Blame History