8.6 KiB

Raw Permalink Blame History

Bygg et Romspill Del 6: Avslutning og Restart

Quiz før forelesning

Det finnes ulike måter å uttrykke en sluttbetingelse i et spill. Det er opp til deg som skaper av spillet å bestemme hvorfor spillet avsluttes. Her er noen mulige grunner, hvis vi antar at vi snakker om romspillet du har bygget så langt:

N fiendtlige skip er ødelagt: Det er ganske vanlig i spill som er delt opp i nivåer at du må ødelegge N fiendtlige skip for å fullføre et nivå.
Skipet ditt er ødelagt: Det finnes definitivt spill hvor du taper hvis skipet ditt blir ødelagt. En annen vanlig tilnærming er å ha et konsept med liv. Hver gang skipet ditt blir ødelagt, mister du et liv. Når alle liv er brukt opp, taper du spillet.
Du har samlet N poeng: En annen vanlig sluttbetingelse er at du samler poeng. Hvordan du får poeng er opp til deg, men det er vanlig å tildele poeng for ulike aktiviteter, som å ødelegge et fiendtlig skip eller samle gjenstander som slippes når de ødelegges.
Fullfør et nivå: Dette kan innebære flere betingelser, som at X fiendtlige skip er ødelagt, Y poeng er samlet, eller kanskje at en spesifikk gjenstand er samlet inn.

Restart

Hvis folk liker spillet ditt, vil de sannsynligvis ønske å spille det igjen. Når spillet avsluttes, uansett grunn, bør du tilby en mulighet til å starte på nytt.

✅ Tenk litt over under hvilke betingelser du opplever at et spill avsluttes, og hvordan du blir oppfordret til å starte på nytt.

Hva du skal bygge

Du skal legge til følgende regler i spillet ditt:

Vinne spillet. Når alle fiendtlige skip er ødelagt, vinner du spillet. I tillegg skal det vises en slags seiersmelding.
Restart. Når alle liv er brukt opp eller spillet er vunnet, skal du tilby en måte å starte spillet på nytt. Husk! Du må reinitialisere spillet, og den forrige spilltilstanden skal slettes.

Anbefalte steg

Finn filene som er opprettet for deg i undermappen your-work. Den skal inneholde følgende:

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

Start prosjektet ditt i your_work-mappen ved å skrive:

cd your-work
npm start

Dette vil starte en HTTP-server på adressen http://localhost:5000. Åpne en nettleser og skriv inn denne adressen. Spillet ditt skal være i en spillbar tilstand.

tips: For å unngå advarsler i Visual Studio Code, rediger window.onload-funksjonen slik at den kaller gameLoopId som den er (uten let), og deklarer gameLoopId øverst i filen, uavhengig: let gameLoopId;

Legg til kode

Spor sluttbetingelse. Legg til kode som holder oversikt over antall fiender, eller om helteskipet er ødelagt, ved å legge til disse to funksjonene:

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

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

Legg til logikk i meldingshåndterere. Rediger eventEmitter for å håndtere disse betingelsene:

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

Legg til nye meldingstyper. Legg til disse meldingene i konstantobjektet:
```
GAME_END_LOSS: "GAME_END_LOSS",
GAME_END_WIN: "GAME_END_WIN",
```
Legg til restart-kode som starter spillet på nytt ved å trykke på en valgt knapp.
1. Lytt til tastetrykk Enter. Rediger vinduets eventListener for å lytte etter dette tastetrykket:
```
 else if(evt.key === "Enter") {
    eventEmitter.emit(Messages.KEY_EVENT_ENTER);
  }
```
1. Legg til restart-melding. Legg til denne meldingen i meldingskonstanten din:
```
KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
```

Implementer spillregler. Implementer følgende spillregler:

Spillerens vinnbetingelse. Når alle fiendtlige skip er ødelagt, vis en seiersmelding.

Først, opprett en displayMessage()-funksjon:

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

Opprett en endGame()-funksjon:

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

Restart-logikk. Når alle liv er brukt opp eller spilleren har vunnet spillet, vis at spillet kan startes på nytt. Start også spillet på nytt når restart-tasten trykkes (du kan bestemme hvilken tast som skal brukes til restart).

Opprett resetGame()-funksjonen:

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

Legg til et kall til eventEmitter for å tilbakestille spillet i initGame():

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

Legg til en clear()-funksjon i EventEmitter:
```
clear() {
  this.listeners = {};
}
```

👽 💥 🚀 Gratulerer, Kaptein! Spillet ditt er komplett! Godt jobbet! 🚀 💥 👽

🚀 Utfordring

Legg til en lyd! Kan du legge til en lyd for å forbedre spillopplevelsen, kanskje når det er et laserskudd, eller når helten dør eller vinner? Ta en titt på denne sandkassen for å lære hvordan du spiller av lyd med JavaScript.

Quiz etter forelesning

Gjennomgang og selvstudium

Oppgaven din er å lage et nytt eksempelspill, så utforsk noen interessante spill der ute for å se hva slags spill du kan lage.

Oppgave

Bygg et eksempelspill

Ansvarsfraskrivelse:
Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten Co-op Translator. Selv om vi tilstreber nøyaktighet, vennligst vær oppmerksom på at automatiske oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på sitt opprinnelige språk bør anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for eventuelle misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.

8.6 KiB Raw Permalink Blame History