Web-Dev-For-Beginners/translations/sv/6-space-game/6-end-condition

Bygg ett Rymdspel Del 6: Slut och Starta om

Förhandsquiz

Förhandsquiz

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 ska ta 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 man delar 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 vanligt att tilldela poäng för olika aktiviteter som att förstöra ett fiendeskepp eller samla föremål som släpps när de förstörs.
• Klarat en nivå: Detta kan innebära flera villkor, 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 är det troligt att de vill spela det igen. När spelet tar slut, oavsett 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 sedan blir uppmanad att starta om.

Vad du ska bygga

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

1. Vinna spelet. När alla fiendeskepp har förstörts vinner du spelet. Visa dessutom ett slags segerbudskap.
2. 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 återställa spelet 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 spelbart.

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

1. 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;
   }
   

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

3. 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",
   

4. Lägg till omstartskod 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 din Messages-konstant:

      KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
      

5. Implementera spelregler. Implementera följande spelregler:

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

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

      1. 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)  
      }
      

   2. 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).

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

   3. Lägg till ett anrop till eventEmitter för att återställa spelet i initGame():

      eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
        resetGame();
      });
      

   4. 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 en laser träffar, eller när hjälten dör eller vinner? Ta en titt på denna sandbox för att lära dig hur man spelar upp ljud med JavaScript.

Efterhandsquiz

Efterhandsquiz

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 automatiserade översättningar kan innehålla fel eller felaktigheter. Det ursprungliga dokumentet på dess ursprungliga språ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.