8.9 KiB

Raw Permalink Blame History

Bouw een Ruimtespel Deel 6: Einde en Herstart

Quiz voor de Les

Er zijn verschillende manieren om een eindconditie in een spel te definiëren. Het is aan jou als maker van het spel om te bepalen waarom het spel eindigt. Hier zijn enkele redenen, ervan uitgaande dat we het hebben over het ruimtespel dat je tot nu toe hebt gebouwd:

N Vijandelijke schepen zijn vernietigd: Het is vrij gebruikelijk dat je, als je een spel in verschillende niveaus verdeelt, N vijandelijke schepen moet vernietigen om een niveau te voltooien.
Je schip is vernietigd: Er zijn zeker spellen waarin je verliest als je schip wordt vernietigd. Een andere veelvoorkomende aanpak is het concept van levens. Elke keer dat je schip wordt vernietigd, verlies je een leven. Als alle levens op zijn, verlies je het spel.
Je hebt N punten verzameld: Een andere veelvoorkomende eindconditie is dat je punten verzamelt. Hoe je punten verdient, is aan jou, maar het is vrij gebruikelijk om punten toe te kennen aan verschillende activiteiten, zoals het vernietigen van een vijandelijk schip of het verzamelen van items die verschijnen wanneer ze worden vernietigd.
Voltooi een niveau: Dit kan verschillende voorwaarden omvatten, zoals X vijandelijke schepen vernietigd, Y punten verzameld of misschien een specifiek item dat is verzameld.

Herstarten

Als mensen je spel leuk vinden, willen ze het waarschijnlijk opnieuw spelen. Zodra het spel om welke reden dan ook eindigt, moet je een optie bieden om opnieuw te beginnen.

✅ Denk eens na over de voorwaarden waaronder een spel eindigt en hoe je wordt aangespoord om opnieuw te beginnen.

Wat te bouwen

Je gaat deze regels aan je spel toevoegen:

Het spel winnen. Zodra alle vijandelijke schepen zijn vernietigd, win je het spel. Toon daarnaast een soort overwinningsbericht.
Herstarten. Zodra al je levens op zijn of het spel is gewonnen, moet je een manier bieden om het spel opnieuw te starten. Vergeet niet! Je moet het spel opnieuw initialiseren en de vorige spelstatus wissen.

Aanbevolen stappen

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

-| assets
  -| enemyShip.png
  -| player.png
  -| laserRed.png
  -| life.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. Je spel zou speelbaar moeten zijn.

tip: om waarschuwingen in Visual Studio Code te vermijden, bewerk de functie window.onload zodat deze gameLoopId aanroept zoals het is (zonder let), en declareer gameLoopId bovenaan het bestand, onafhankelijk: let gameLoopId;

Code toevoegen

Eindconditie bijhouden. Voeg code toe die het aantal vijanden bijhoudt, of of het heldenschip is vernietigd door deze twee functies toe te voegen:

function isHeroDead() {
  return hero.life <= 0;
}

function isEnemiesDead() {
  const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
  return enemies.length === 0;
}

Logica toevoegen aan berichtverwerkers. Bewerk de eventEmitter om deze voorwaarden te verwerken:

eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
    first.dead = true;
    second.dead = true;
    hero.incrementPoints();

    if (isEnemiesDead()) {
      eventEmitter.emit(Messages.GAME_END_WIN);
    }
});

eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
    enemy.dead = true;
    hero.decrementLife();
    if (isHeroDead())  {
      eventEmitter.emit(Messages.GAME_END_LOSS);
      return; // loss before victory
    }
    if (isEnemiesDead()) {
      eventEmitter.emit(Messages.GAME_END_WIN);
    }
});

eventEmitter.on(Messages.GAME_END_WIN, () => {
    endGame(true);
});

eventEmitter.on(Messages.GAME_END_LOSS, () => {
  endGame(false);
});

Nieuwe berichttypes toevoegen. Voeg deze berichten toe aan het constants-object:
```
GAME_END_LOSS: "GAME_END_LOSS",
GAME_END_WIN: "GAME_END_WIN",
```
Herstartcode toevoegen. Voeg code toe die het spel opnieuw start bij het indrukken van een geselecteerde knop.
1. Luister naar toetsdruk Enter. Bewerk de eventListener van je venster om naar deze toets te luisteren:
```
 else if(evt.key === "Enter") {
    eventEmitter.emit(Messages.KEY_EVENT_ENTER);
  }
```
1. Herstartbericht toevoegen. Voeg dit bericht toe aan je Messages constant:
```
KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
```

Spelregels implementeren. Implementeer de volgende spelregels:

Winconditie speler. Wanneer alle vijandelijke schepen zijn vernietigd, toon een overwinningsbericht.

Maak eerst een functie displayMessage():

function displayMessage(message, color = "red") {
  ctx.font = "30px Arial";
  ctx.fillStyle = color;
  ctx.textAlign = "center";
  ctx.fillText(message, canvas.width / 2, canvas.height / 2);
}

Maak een functie endGame():

function endGame(win) {
  clearInterval(gameLoopId);

  // set a delay so we are sure any paints have finished
  setTimeout(() => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    if (win) {
      displayMessage(
        "Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
        "green"
      );
    } else {
      displayMessage(
        "You died !!! Press [Enter] to start a new game Captain Pew Pew"
      );
    }
  }, 200)  
}

Herstartlogica. Wanneer alle levens op zijn of de speler het spel heeft gewonnen, geef aan dat het spel opnieuw kan worden gestart. Start het spel opnieuw wanneer de herstart-toets wordt ingedrukt (je kunt zelf bepalen welke toets wordt toegewezen aan herstart).

Maak de functie resetGame():

function resetGame() {
  if (gameLoopId) {
    clearInterval(gameLoopId);
    eventEmitter.clear();
    initGame();
    gameLoopId = setInterval(() => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = "black";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      drawPoints();
      drawLife();
      updateGameObjects();
      drawGameObjects(ctx);
    }, 100);
  }
}

Voeg een aanroep toe aan de eventEmitter om het spel opnieuw in te stellen in initGame():
```
eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
  resetGame();
});
```
Voeg een clear()-functie toe aan de EventEmitter:
```
clear() {
  this.listeners = {};
}
```

👽 💥 🚀 Gefeliciteerd, Kapitein! Je spel is compleet! Goed gedaan! 🚀 💥 👽

🚀 Uitdaging

Voeg een geluid toe! Kun je een geluid toevoegen om je gameplay te verbeteren, bijvoorbeeld wanneer er een laser raakt, of wanneer de held sterft of wint? Bekijk deze sandbox om te leren hoe je geluid afspeelt met JavaScript.

Quiz na de Les

Quiz na de les

Herziening & Zelfstudie

Je opdracht is om een nieuw voorbeeldspel te maken, dus verken enkele interessante spellen om te zien wat voor soort spel je zou kunnen bouwen.

Opdracht

Bouw een Voorbeeldspel

Disclaimer:
Dit document is vertaald met behulp van de AI-vertalingsservice Co-op Translator. Hoewel we streven naar nauwkeurigheid, willen we u erop wijzen 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.

8.9 KiB Raw Permalink Blame History