8.6 KiB

Raw Blame History

Bygg et romspill del 6: Slutt 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 å definere hvorfor spillet har tatt slutt. Her er noen grunner, hvis vi antar at vi snakker om romspillet du har bygget så langt:

N fiendtlige skip er blitt ødelagt: Det er ganske vanlig, hvis du deler opp et spill i ulike nivåer, at du må ødelegge N fiendtlige skip for å fullføre et nivå.
Ditt skip er blitt ødelagt: Det finnes definitivt spill hvor du taper hvis skipet ditt blir ødelagt. En annen vanlig tilnærming er å ha et livsystem. 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 ganske vanlig å tildele poeng for ulike aktiviteter, som å ødelegge et fiendtlig skip eller samle gjenstander som slippes når de blir ødelagt.
Fullfør et nivå: Dette kan innebære flere betingelser, som X fiendtlige skip ødelagt, Y poeng samlet, eller kanskje at en spesifikk gjenstand er blitt samlet.

Restart

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

✅ Tenk litt på under hvilke betingelser du opplever at et spill tar slutt, og hvordan du blir bedt om å starte på nytt.

Hva du skal bygge

Du skal legge til disse reglene i spillet ditt:

Vinne spillet. Når alle fiendtlige skip er ødelagt, vinner du spillet. I tillegg skal du vise 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 tidligere spilltilstanden skal ryddes.

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 mappen your_work ved å skrive:

cd your-work
npm start

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

tips: for å unngå advarsler i Visual Studio Code, rediger funksjonen window.onload til å kalle 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 blitt ø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 constants-objektet:
```
GAME_END_LOSS: "GAME_END_LOSS",
GAME_END_WIN: "GAME_END_WIN",
```
Legg til restart-kode som starter spillet på nytt ved trykk på en valgt knapp.
1. Lytt til tastetrykk Enter. Rediger vinduets eventListener til å 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 Messages-objektet:
```
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 funksjon 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);
}

Opprett en funksjon 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)  
}

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

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

Legg til et kall til eventEmitter for å resette 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 ferdig! Godt jobbet! 🚀 💥 👽

🚀 Utfordring

Legg til lyd! Kan du legge til lyd for å forbedre spillopplevelsen, kanskje når det er et laser-treff, eller helten dør eller vinner? Ta en titt på denne sandboxen 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 bygge.

Oppgave

Bygg et eksempelspill

Ansvarsfraskrivelse:
Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten Co-op Translator. Selv om vi streber etter nøyaktighet, vær oppmerksom på at automatiserte 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 misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.

8.6 KiB Raw Blame History