History

leestott 425e0f6fbe 🌐 Update translations via Co-op Translator		3 weeks ago
..
solution	🌐 Update translations via Co-op Translator	4 weeks ago
your-work	🌐 Update translations via Co-op Translator	4 weeks ago
README.md	🌐 Update translations via Co-op Translator	3 weeks ago
assignment.md	🌐 Update translations via Co-op Translator	4 weeks ago

README.md

Bygg et Romspill Del 5: Poeng og Liv

Quiz før forelesning

I denne leksjonen skal du lære hvordan du legger til poeng i et spill og beregner liv.

Tegn tekst på skjermen

For å kunne vise poengsummen i spillet på skjermen, må du vite hvordan du plasserer tekst på skjermen. Svaret er å bruke metoden fillText() på canvas-objektet. Du kan også kontrollere andre aspekter som hvilken font som skal brukes, fargen på teksten og til og med justeringen (venstre, høyre, senter). Nedenfor er litt kode som tegner tekst på skjermen.

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

✅ Les mer om hvordan legge til tekst på et canvas, og føl deg fri til å gjøre din versjon mer fancy!

Liv som et spillkonsept

Konseptet med å ha liv i et spill er bare et tall. I konteksten av et romspill er det vanlig å tildele et sett med liv som reduseres ett etter ett når skipet ditt tar skade. Det er fint om du kan vise en grafisk representasjon av dette, som små skip eller hjerter, i stedet for bare et tall.

Hva skal bygges

La oss legge til følgende i spillet ditt:

Poengsum i spillet: For hvert fiendeskip som blir ødelagt, skal helten få poeng. Vi foreslår 100 poeng per skip. Poengsummen skal vises nederst til venstre.
Liv: Skipet ditt har tre liv. Du mister ett liv hver gang et fiendeskip kolliderer med deg. Antall liv skal vises nederst til høyre og være laget av følgende grafikk .

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
-| 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 den adressen. Akkurat nå skal den vise helten og alle fiendene, og når du trykker på venstre- og høyrepilene, beveger helten seg og kan skyte ned fiender.

Legg til kode

Kopier over nødvendige ressurser fra mappen solution/assets/ til your-work-mappen; du skal legge til ressursen life.png. Legg til lifeImg i window.onload-funksjonen:
```
lifeImg = await loadTexture("assets/life.png");
```

Legg til lifeImg i listen over ressurser:

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

Legg til variabler. Legg til kode som representerer din totale poengsum (0) og antall gjenværende liv (3), og vis disse på skjermen.

Utvid funksjonen updateGameObjects(). Utvid funksjonen updateGameObjects() for å håndtere kollisjoner med fiender:

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

Legg til liv og poeng.

Initialiser variabler. Under this.cooldown = 0 i klassen Hero, sett liv og poeng:
```
this.life = 3;
this.points = 0;
```

Tegn variabler på skjermen. Tegn 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);
}

Legg til metoder i spill-løkken. Sørg for å legge til disse funksjonene i window.onload-funksjonen under updateGameObjects():
```
drawPoints();
drawLife();
```

Implementer spillregler. Implementer følgende spillregler:

For hver kollisjon mellom helten og en fiende, trekk fra ett liv.

Utvid klassen Hero for å gjøre dette fratrekket:
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```

For hver laser som treffer en fiende, øk poengsummen med 100 poeng.

Utvid klassen Hero for å gjøre denne økningen:

  incrementPoints() {
    this.points += 100;
  }

Legg til disse funksjonene i dine Collision Event Emitters:

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

✅ Gjør litt research for å oppdage andre spill som er laget med JavaScript/Canvas. Hva er deres fellestrekk?

Når du er ferdig med dette arbeidet, skal du se små "liv"-skip nederst til høyre, poeng nederst til venstre, og du skal se at antall liv reduseres når du kolliderer med fiender, og poengene øker når du skyter fiender. Bra jobbet! Spillet ditt er nesten ferdig.

🚀 Utfordring

Koden din er nesten ferdig. Kan du se for deg neste steg?

Quiz etter forelesning

Gjennomgang og selvstudium

Undersøk noen måter du kan øke og redusere poeng og liv i spill. Det finnes noen interessante spillmotorer som PlayFab. Hvordan kunne bruk av en slik motor forbedret spillet ditt?

Oppgave

Bygg et poengspill

Ansvarsfraskrivelse:
Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten Co-op Translator. Selv om vi tilstreber nøyaktighet, 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.