9.0 KiB

Raw Blame History

Bygg ett rymdspel del 5: Poäng och liv

Quiz före föreläsningen

Redo att göra ditt rymdspel till ett riktigt spel? Låt oss lägga till poäng och hantering av liv - de grundläggande mekanismerna som förvandlade tidiga arkadspel som Space Invaders från enkla demonstrationer till beroendeframkallande underhållning. Det är här ditt spel blir riktigt spelbart.

Visa text på skärmen - spelets röst

För att visa din poäng måste vi lära oss hur man renderar text på canvas. Metoden fillText() är ditt främsta verktyg för detta - det är samma teknik som användes i klassiska arkadspel för att visa poäng och statusinformation.

Du har full kontroll över textens utseende:

ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "right";
ctx.fillText("show this on the screen", 0, 0);

✅ Utforska mer om att lägga till text på en canvas - du kanske blir förvånad över hur kreativ du kan vara med typsnitt och styling!

Liv - mer än bara en siffra

Inom speldesign representerar ett "liv" spelarens marginal för misstag. Detta koncept går tillbaka till flipperspel, där man fick flera bollar att spela med. I tidiga videospel som Asteroids gav liv spelarna tillåtelse att ta risker och lära sig av sina misstag.

Visuell representation är mycket viktig - att visa skeppsikoner istället för bara "Liv: 3" skapar omedelbar visuell igenkänning, precis som tidiga arkadkabinetter använde ikonografi för att kommunicera över språkbarriärer.

Bygg ditt spels belöningssystem

Nu ska vi implementera de grundläggande feedbacksystemen som håller spelarna engagerade:

Poängsystem: Varje förstört fiendeskepp ger 100 poäng (runda siffror är lättare för spelare att räkna mentalt). Poängen visas i det nedre vänstra hörnet.
Livräknare: Din hjälte börjar med tre liv - en standard som etablerades av tidiga arkadspel för att balansera utmaning med spelbarhet. Varje kollision med en fiende kostar ett liv. Vi visar återstående liv i det nedre högra hörnet med skeppsikoner .

Låt oss börja bygga!

Först, ställ in din arbetsyta. Navigera till filerna i din your-work undermapp. Du bör se dessa filer:

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

För att testa ditt spel, starta utvecklingsservern från mappen your_work:

cd your-work
npm start

Detta kör en lokal server på http://localhost:5000. Öppna denna adress i din webbläsare för att se ditt spel. Testa kontrollerna med piltangenterna och försök skjuta fiender för att verifiera att allt fungerar.

Dags att koda!

Hämta de visuella resurser du behöver. Kopiera life.png-resursen från mappen solution/assets/ till din your-work-mapp. Lägg sedan till lifeImg i din window.onload-funktion:
```
lifeImg = await loadTexture("assets/life.png");
```

Glöm inte att lägga till lifeImg i din resurslista:

let heroImg,
...
lifeImg,
...
eventEmitter = new EventEmitter();

Ställ in dina spelvariabler. Lägg till lite kod för att spåra din totala poäng (startar på 0) och återstående liv (startar på 3). Vi kommer att visa dessa på skärmen så att spelarna alltid vet var de står.

Implementera kollisionsdetektering. Utöka din updateGameObjects()-funktion för att upptäcka när fiender kolliderar med din hjälte:

enemies.forEach(enemy => {
    const heroRect = hero.rectFromGameObject();
    if (intersectRect(heroRect, enemy.rectFromGameObject())) {
      eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
    }
  })

Lägg till liv- och poängspårning till din hjälte.

Initiera räknarna. Under this.cooldown = 0 i din Hero-klass, ställ in liv och poäng:
```
this.life = 3;
this.points = 0;
```

Visa dessa värden för spelaren. Skapa funktioner för att visa dessa värden på skärmen:

function drawLife() {
  // TODO, 35, 27
  const START_POS = canvas.width - 180;
  for(let i=0; i < hero.life; i++ ) {
    ctx.drawImage(
      lifeImg, 
      START_POS + (45 * (i+1) ), 
      canvas.height - 37);
  }
}

function drawPoints() {
  ctx.font = "30px Arial";
  ctx.fillStyle = "red";
  ctx.textAlign = "left";
  drawText("Points: " + hero.points, 10, canvas.height-20);
}

function drawText(message, x, y) {
  ctx.fillText(message, x, y);
}

Koppla allt till din spel-loop. Lägg till dessa funktioner i din window.onload-funktion direkt efter updateGameObjects():
```
drawPoints();
drawLife();
```

Implementera konsekvenser och belöningar i spelet. Nu ska vi lägga till feedbacksystemen som gör spelarens handlingar meningsfulla:
1. Kollisioner kostar liv. Varje gång din hjälte kraschar in i en fiende, ska du förlora ett liv.
  
  Lägg till denna metod i din Hero-klass:
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```
2. Att skjuta fiender ger poäng. Varje lyckad träff ger 100 poäng, vilket ger omedelbar positiv feedback för träffsäker skjutning.
  
  Utöka din Hero-klass med denna inkrementeringsmetod:
```
  incrementPoints() {
    this.points += 100;
  }
```
  Koppla nu dessa funktioner till dina kollisionshändelser:
```
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
   first.dead = true;
   second.dead = true;
   hero.incrementPoints();
})

eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
   enemy.dead = true;
   hero.decrementLife();
});
```

✅ Nyfiken på andra spel som byggts med JavaScript och Canvas? Utforska lite - du kanske blir förvånad över vad som är möjligt!

Efter att ha implementerat dessa funktioner, testa ditt spel för att se det kompletta feedbacksystemet i aktion. Du bör se livsikoner i det nedre högra hörnet, din poäng i det nedre vänstra hörnet, och se hur kollisioner minskar liv medan lyckade skott ökar din poäng.

Ditt spel har nu de grundläggande mekanismerna som gjorde tidiga arkadspel så fängslande - tydliga mål, omedelbar feedback och meningsfulla konsekvenser för spelarens handlingar.

GitHub Copilot Agent Challenge 🚀

Använd Agent-läget för att slutföra följande utmaning:

Beskrivning: Förbättra rymdspelets poängsystem genom att implementera en funktion för högsta poäng med beständig lagring och bonuspoängsmekanik.

Uppmaning: Skapa ett system för högsta poäng som sparar spelarens bästa poäng i localStorage. Lägg till bonuspoäng för konsekutiva fiendeträffar (kombosystem) och implementera olika poängvärden för olika fiendetyper. Inkludera en visuell indikator när spelaren uppnår en ny högsta poäng och visa den aktuella högsta poängen på spelskärmen.

🚀 Utmaning

Du har nu ett fungerande spel med poäng och liv. Fundera på vilka ytterligare funktioner som kan förbättra spelupplevelsen.

Quiz efter föreläsningen

Granskning & Självstudier

Vill du utforska mer? Undersök olika tillvägagångssätt för poäng- och livsystem i spel. Det finns fascinerande spelmotorer där ute som PlayFab som hanterar poäng, topplistor och spelarutveckling. Hur skulle en integration av något sådant kunna ta ditt spel till nästa nivå?

Uppgift

Bygg ett poängspel

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 det noteras 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.

9.0 KiB Raw Blame History