History

softchris a7d39944e9 🌐 Update translations via Co-op Translator		1 month ago
..
solution	🌐 Update translations via Co-op Translator	3 months ago
your-work	🌐 Update translations via Co-op Translator	3 months ago
README.md	🌐 Update translations via Co-op Translator	1 month ago
assignment.md	🌐 Update translations via Co-op Translator	3 months ago

README.md

Bygg et Romspill Del 5: Poeng og Liv

Quiz før forelesning

Klar for å gjøre romspillet ditt til et ekte spill? La oss legge til poengsystem og livshåndtering - de grunnleggende mekanismene som forvandlet tidlige arkadespill som Space Invaders fra enkle demonstrasjoner til avhengighetsskapende underholdning. Dette er punktet hvor spillet ditt blir virkelig spillbart.

Tegne tekst på skjermen - Spillets stemme

For å vise poengsummen din, må vi lære hvordan vi kan vise tekst på lerretet. Metoden fillText() er ditt viktigste verktøy for dette - det er samme teknikk som ble brukt i klassiske arkadespill for å vise poengsummer og statusinformasjon.

Du har full kontroll over tekstens utseende:

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

✅ Utforsk mer om å legge til tekst på et lerret - du kan bli overrasket over hvor kreativ du kan være med skrifttyper og styling!

Liv - Mer enn bare et tall

I spilldesign representerer et "liv" spillerens margin for feil. Dette konseptet stammer fra flipperspill, hvor du fikk flere baller å spille med. I tidlige videospill som Asteroids ga liv spillerne tillatelse til å ta risiko og lære av feil.

Visuell representasjon er svært viktig - å vise skip-ikoner i stedet for bare "Liv: 3" skaper umiddelbar visuell gjenkjennelse, på samme måte som tidlige arkadekabinetter brukte ikonografi for å kommunisere på tvers av språkbarrierer.

Bygg belønningssystemet i spillet ditt

Nå skal vi implementere de grunnleggende tilbakemeldingssystemene som holder spillerne engasjert:

Poengsystem: Hvert ødelagt fiendeskip gir 100 poeng (runde tall er enklere for spillere å regne ut mentalt). Poengsummen vises nederst til venstre.
Livsteller: Helten din starter med tre liv - en standard etablert av tidlige arkadespill for å balansere utfordring med spillbarhet. Hver kollisjon med en fiende koster ett liv. Vi viser gjenværende liv nederst til høyre ved hjelp av skip-ikoner .

La oss komme i gang!

Først, sett opp arbeidsområdet ditt. Naviger til filene i your-work undermappen. Du bør se disse filene:

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

For å teste spillet ditt, start utviklingsserveren fra your_work-mappen:

cd your-work
npm start

Dette kjører en lokal server på http://localhost:5000. Åpne denne adressen i nettleseren din for å se spillet ditt. Test kontrollene med piltastene og prøv å skyte fiender for å verifisere at alt fungerer.

Tid for koding!

Hent de visuelle ressursene du trenger. Kopier life.png-ressursen fra solution/assets/-mappen til your-work-mappen din. Legg deretter til lifeImg i din window.onload-funksjon:
```
lifeImg = await loadTexture("assets/life.png");
```

Ikke glem å legge til lifeImg i ressurslisten din:

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

Sett opp spillvariablene dine. Legg til litt kode for å spore din totale poengsum (starter på 0) og gjenværende liv (starter på 3). Vi viser disse på skjermen slik at spillerne alltid vet hvor de står.

Implementer kollisjonsdeteksjon. Utvid updateGameObjects()-funksjonen din for å oppdage når fiender kolliderer med helten din:

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

Legg til livs- og poengsporing til helten din.

Initialiser tellerne. Under this.cooldown = 0 i din Hero-klasse, sett opp liv og poeng:
```
this.life = 3;
this.points = 0;
```

Vis disse verdiene til spilleren. Lag funksjoner for å tegne disse verdiene på skjermen:

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

Koble alt til spill-loopen din. Legg til disse funksjonene i din window.onload-funksjon rett etter updateGameObjects():
```
drawPoints();
drawLife();
```

Implementer konsekvenser og belønninger i spillet. Nå skal vi legge til tilbakemeldingssystemene som gjør spillerens handlinger meningsfulle:
1. Kollisjoner koster liv. Hver gang helten din krasjer inn i en fiende, bør du miste et liv.
  
  Legg til denne metoden i din Hero-klasse:
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```
2. Å skyte fiender gir poeng. Hvert vellykket treff gir 100 poeng, som gir umiddelbar positiv tilbakemelding for presis skyting.
  
  Utvid Hero-klassen din med denne inkrementeringsmetoden:
```
  incrementPoints() {
    this.points += 100;
  }
```
  Koble nå disse funksjonene til kollisjonshendelsene dine:
```
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();
});
```

✅ Nysgjerrig på andre spill laget med JavaScript og Canvas? Utforsk litt - du kan bli overrasket over hva som er mulig!

Etter å ha implementert disse funksjonene, test spillet ditt for å se det komplette tilbakemeldingssystemet i aksjon. Du bør se livsikoner nederst til høyre, poengsummen din nederst til venstre, og se hvordan kollisjoner reduserer livene mens vellykkede skudd øker poengsummen din.

Spillet ditt har nå de essensielle mekanismene som gjorde tidlige arkadespill så fengslende - klare mål, umiddelbar tilbakemelding og meningsfulle konsekvenser for spillerens handlinger.

GitHub Copilot Agent Challenge 🚀

Bruk Agent-modus for å fullføre følgende utfordring:

Beskrivelse: Forbedre romspillets poengsystem ved å implementere en high score-funksjon med vedvarende lagring og bonuspoengmekanismer.

Oppgave: Lag et high score-system som lagrer spillerens beste poengsum til localStorage. Legg til bonuspoeng for påfølgende fiendedrap (kombosystem) og implementer forskjellige poengverdier for ulike fiendetyper. Inkluder en visuell indikator når spilleren oppnår en ny high score og vis den nåværende high scoren på spillskjermen.

🚀 Utfordring

Du har nå et funksjonelt spill med poeng og liv. Tenk over hvilke ekstra funksjoner som kan forbedre spilleropplevelsen.

Quiz etter forelesning

Gjennomgang og selvstudium

Vil du utforske mer? Undersøk forskjellige tilnærminger til poeng- og livssystemer i spill. Det finnes fascinerende spillmotorer der ute som PlayFab som håndterer poengsummer, rangeringer og spillerutvikling. Hvordan kan integrering av noe slikt ta spillet ditt til neste nivå?

Oppgave

Bygg et poengspill

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å dets 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.