8.7 KiB

Raw Permalink Blame History

Bygg ett rymdspel del 6: Slut och starta om

Quiz före föreläsning

Det finns olika sätt att uttrycka ett slutvillkor i ett spel. Det är upp till dig som skapare av spelet att bestämma varför spelet har tagit slut. Här är några anledningar, om vi antar att vi pratar om rymdspelet du har byggt hittills:

N fiendeskepp har förstörts: Det är ganska vanligt att dela upp ett spel i olika nivåer där du behöver förstöra N fiendeskepp för att klara en nivå.
Ditt skepp har förstörts: Det finns definitivt spel där du förlorar om ditt skepp förstörs. Ett annat vanligt tillvägagångssätt är att ha ett koncept med liv. Varje gång ditt skepp förstörs förlorar du ett liv. När alla liv är slut förlorar du spelet.
Du har samlat N poäng: Ett annat vanligt slutvillkor är att samla poäng. Hur du får poäng är upp till dig, men det är ganska vanligt att tilldela poäng för olika aktiviteter, som att förstöra ett fiendeskepp eller kanske samla föremål som släpps när de förstörs.
Klarat en nivå: Detta kan innebära flera villkor, såsom att X fiendeskepp förstörts, Y poäng samlats eller kanske att ett specifikt föremål har samlats in.

Starta om

Om folk gillar ditt spel kommer de troligtvis vilja spela det igen. När spelet tar slut av någon anledning bör du erbjuda ett alternativ att starta om.

✅ Fundera lite på under vilka villkor du tycker att ett spel tar slut, och hur du blir uppmanad att starta om.

Vad du ska bygga

Du kommer att lägga till dessa regler i ditt spel:

Vinna spelet. När alla fiendeskepp har förstörts vinner du spelet. Visa dessutom någon form av segermeddelande.
Starta om. När alla dina liv är slut eller spelet är vunnet bör du erbjuda ett sätt att starta om spelet. Kom ihåg! Du måste initiera spelet på nytt och rensa det tidigare spelstatuset.

Rekommenderade steg

Leta upp filerna som har skapats åt dig i undermappen your-work. Den bör innehålla följande:

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

Starta ditt projekt i mappen your_work genom att skriva:

cd your-work
npm start

Ovanstående startar en HTTP-server på adressen http://localhost:5000. Öppna en webbläsare och ange den adressen. Ditt spel bör vara i ett spelbart tillstånd.

tips: för att undvika varningar i Visual Studio Code, redigera funktionen window.onload så att den anropar gameLoopId som den är (utan let), och deklarera gameLoopId högst upp i filen, separat: let gameLoopId;

Lägg till kod

Spåra slutvillkor. Lägg till kod som håller koll på antalet fiender, eller om hjälteskeppet har förstörts genom att lägga till dessa två funktioner:

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

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

Lägg till logik i meddelandehanterare. Redigera eventEmitter för att hantera dessa villkor:

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

Lägg till nya meddelandetyper. Lägg till dessa meddelanden i objektet constants:
```
GAME_END_LOSS: "GAME_END_LOSS",
GAME_END_WIN: "GAME_END_WIN",
```
Lägg till omstartskod. Lägg till kod som startar om spelet vid tryck på en vald knapp.
1. Lyssna på knapptryck Enter. Redigera din fönsters eventListener för att lyssna på detta tryck:
```
 else if(evt.key === "Enter") {
    eventEmitter.emit(Messages.KEY_EVENT_ENTER);
  }
```
1. Lägg till omstartsmeddelande. Lägg till detta meddelande i ditt meddelandekonstant:
```
KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
```

Implementera spelregler. Implementera följande spelregler:

Spelarens vinstvillkor. När alla fiendeskepp är förstörda, visa ett segermeddelande.

Skapa först en funktion 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);
}

Skapa en funktion 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)  
}

Omstartlogik. När alla liv är slut eller spelaren har vunnit spelet, visa att spelet kan startas om. Starta dessutom om spelet när omstartsknappen trycks (du kan bestämma vilken knapp som ska användas för omstart).

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

Lägg till ett anrop till eventEmitter för att återställa spelet i initGame():
```
eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
  resetGame();
});
```
Lägg till en funktion clear() i EventEmitter:
```
clear() {
  this.listeners = {};
}
```

👽 💥 🚀 Grattis, Kapten! Ditt spel är klart! Bra jobbat! 🚀 💥 👽

🚀 Utmaning

Lägg till ett ljud! Kan du lägga till ett ljud för att förbättra spelupplevelsen, kanske när det sker en laserträff, eller när hjälten dör eller vinner? Ta en titt på denna sandbox för att lära dig hur man spelar ljud med JavaScript.

Quiz efter föreläsning

Granskning & Självstudier

Din uppgift är att skapa ett nytt exempelspel, så utforska några av de intressanta spelen där ute för att se vilken typ av spel du kanske vill bygga.

Uppgift

Bygg ett exempelspel

Ansvarsfriskrivning:
Detta dokument har översatts med hjälp av AI-översättningstjänsten Co-op Translator. Även om vi strävar efter noggrannhet, bör du vara medveten om att automatiska översättningar kan innehålla fel eller inexaktheter. Det ursprungliga dokumentet på dess originalspråk bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för eventuella missförstånd eller feltolkningar som uppstår vid användning av denna översättning.

8.7 KiB Raw Permalink Blame History