History

Lee Stott 2daab5271b Update Quiz Link		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 Quiz Link	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 vil du lære hvordan du legger til poeng i et spill og beregner liv.

Tegn tekst på skjermen

For å kunne vise poengsummen til et spill 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 dens justering (venstre, høyre, midtstilt). 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 du legger 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 blir trukket fra 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 et tall.

Hva skal bygges

La oss legge til følgende i spillet ditt:

Spillpoeng: For hver fiendtlige skip som blir ødelagt, bør helten få noen poeng. Vi foreslår 100 poeng per skip. Spillpoengene skal vises nederst til venstre.
Liv: Skipet ditt har tre liv. Du mister et liv hver gang et fiendtlig skip kolliderer med deg. Livet 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

Ovennevnte 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øyre piltaster, 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 vil 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 gjenværende liv (3), og vis disse verdiene 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 et liv.

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

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

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

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

Legg til disse funksjonene i dine kollisjonshendelsesutløsere:

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 vanlige trekk?

Når du er ferdig med dette arbeidet, bør du se de små "liv"-skipene nederst til høyre, poeng nederst til venstre, og du bør se at livene dine reduseres når du kolliderer med fiender og poengene dine ø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 selvstudie

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

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 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 misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.