8.8 KiB

Raw Blame History

Byg et Rumspil Del 5: Point og Liv

Quiz før forelæsning

Klar til at gøre dit rumspil til et rigtigt spil? Lad os tilføje point og håndtering af liv - de kerneelementer, der forvandlede tidlige arkadespil som Space Invaders fra simple demonstrationer til vanedannende underholdning. Det er her, dit spil bliver virkelig spilbart.

Tegn tekst på skærmen - Din spils stemme

For at vise din score skal vi lære, hvordan man gengiver tekst på lærredet. Metoden fillText() er dit primære værktøj til dette - det er den samme teknik, som blev brugt i klassiske arkadespil til at vise point og statusinformation.

Du har fuld kontrol over tekstens udseende:

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

✅ Dyk dybere ned i tilføjelse af tekst til et lærred - du vil måske blive overrasket over, hvor kreativ du kan være med skrifttyper og styling!

Liv - Mere end bare et tal

I spildesign repræsenterer et "liv" spillerens margin for fejl. Dette koncept går tilbage til flippermaskiner, hvor man fik flere kugler at spille med. I tidlige videospil som Asteroids gav liv spillerne tilladelse til at tage chancer og lære af deres fejl.

Visuel repræsentation betyder meget - at vise skibsikoner i stedet for blot "Liv: 3" skaber øjeblikkelig visuel genkendelse, ligesom tidlige arkadekabinetter brugte ikonografi til at kommunikere på tværs af sprogbarrierer.

Byg dit spils belønningssystem

Nu implementerer vi de kernefeedbacksystemer, der holder spillerne engagerede:

Pointsystem: Hvert ødelagt fjendeskib giver 100 point (runde tal er lettere for spillere at beregne mentalt). Scoren vises nederst til venstre.
Livstæller: Din helt starter med tre liv - en standard etableret af tidlige arkadespil for at balancere udfordring med spilbarhed. Hver kollision med en fjende koster et liv. Vi viser de resterende liv nederst til højre med skibsikoner .

Lad os komme i gang!

Først skal du sætte din arbejdsplads op. Naviger til filerne i din your-work undermappe. Du bør se disse filer:

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

For at teste dit spil skal du starte udviklingsserveren fra mappen your_work:

cd your-work
npm start

Dette kører en lokal server på http://localhost:5000. Åbn denne adresse i din browser for at se dit spil. Test kontrollerne med piletasterne og prøv at skyde fjender for at verificere, at alt fungerer.

Tid til at kode!

Hent de visuelle ressourcer, du skal bruge. Kopier life.png ressourcen fra mappen solution/assets/ til din your-work mappe. Tilføj derefter lifeImg til din window.onload funktion:
```
lifeImg = await loadTexture("assets/life.png");
```

Glem ikke at tilføje lifeImg til din liste over ressourcer:

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

Opsæt dine spilvariabler. Tilføj noget kode for at spore din samlede score (starter ved 0) og resterende liv (starter ved 3). Vi viser disse på skærmen, så spillerne altid ved, hvor de står.

Implementer kollisionsdetektion. Udvid din updateGameObjects() funktion til at opdage, når fjender kolliderer med din helt:

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

Tilføj livs- og pointsporing til din helt.

Initialiser tællerne. Under this.cooldown = 0 i din Hero klasse, opsæt liv og point:
```
this.life = 3;
this.points = 0;
```

Vis disse værdier til spilleren. Opret funktioner til at tegne disse værdier 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);
}

Integrer alt i din spilsløjfe. Tilføj disse funktioner til din window.onload funktion lige efter updateGameObjects():
```
drawPoints();
drawLife();
```

Implementer konsekvenser og belønninger i spillet. Nu tilføjer vi de feedbacksystemer, der gør spillerens handlinger meningsfulde:
1. Kollisioner koster liv. Hver gang din helt støder ind i en fjende, skal du miste et liv.
  
  Tilføj denne metode til din Hero klasse:
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```
2. At skyde fjender giver point. Hvert vellykket skud giver 100 point, hvilket giver øjeblikkelig positiv feedback for præcise skud.
  
  Udvid din Hero klasse med denne metode til at øge point:
```
  incrementPoints() {
    this.points += 100;
  }
```
  Forbind nu disse funktioner til dine 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();
});
```

✅ Nysgerrig efter andre spil bygget med JavaScript og Canvas? Udforsk lidt - du vil måske blive overrasket over, hvad der er muligt!

Efter at have implementeret disse funktioner, test dit spil for at se det komplette feedbacksystem i aktion. Du bør se livsikoner nederst til højre, din score nederst til venstre, og se hvordan kollisioner reducerer liv, mens vellykkede skud øger din score.

Dit spil har nu de essentielle mekanikker, der gjorde tidlige arkadespil så fængslende - klare mål, øjeblikkelig feedback og meningsfulde konsekvenser for spillerens handlinger.

GitHub Copilot Agent Challenge 🚀

Brug Agent mode til at fuldføre følgende udfordring:

Beskrivelse: Forbedr rumspillets pointssystem ved at implementere en high score funktion med persistent lagring og bonuspoint-mekanik.

Opgave: Opret et high score system, der gemmer spillerens bedste score i localStorage. Tilføj bonuspoint for konsekutive fjendedrab (kombosystem) og implementer forskellige pointværdier for forskellige fjendetyper. Inkluder en visuel indikator, når spilleren opnår en ny high score, og vis den aktuelle high score på spilskærmen.

🚀 Udfordring

Du har nu et funktionelt spil med point og liv. Overvej hvilke yderligere funktioner der kunne forbedre spilleroplevelsen.

Quiz efter forelæsning

Gennemgang & Selvstudie

Vil du udforske mere? Undersøg forskellige tilgange til spilscoring og livssystemer. Der findes fascinerende spilmotorer derude som PlayFab, der håndterer scoring, ranglister og spillerudvikling. Hvordan kunne integration af noget lignende tage dit spil til næste niveau?

Opgave

Byg et Pointspil

Ansvarsfraskrivelse:
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten Co-op Translator. Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi er ikke ansvarlige for eventuelle misforståelser eller fejltolkninger, der opstår som følge af brugen af denne oversættelse.

8.8 KiB Raw Blame History