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

Baue ein Weltraumspiel Teil 5: Punkte und Leben

Quiz vor der Lektion

In dieser Lektion lernst du, wie man Punkte zu einem Spiel hinzufügt und Leben berechnet.

Text auf dem Bildschirm anzeigen

Um den Punktestand eines Spiels auf dem Bildschirm anzuzeigen, musst du wissen, wie man Text auf dem Bildschirm platziert. Die Antwort ist die Methode fillText() des Canvas-Objekts. Du kannst auch andere Aspekte steuern, wie die Schriftart, die Farbe des Textes und sogar die Ausrichtung (links, rechts, zentriert). Unten findest du Code, der Text auf dem Bildschirm zeichnet.

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

✅ Lies mehr darüber, wie man Text zu einem Canvas hinzufügt, und gestalte deinen Text ruhig etwas schicker!

Leben als Spielkonzept

Das Konzept von Leben in einem Spiel ist lediglich eine Zahl. Im Kontext eines Weltraumspiels ist es üblich, eine bestimmte Anzahl von Leben zuzuweisen, die nach und nach abgezogen werden, wenn dein Schiff Schaden nimmt. Es ist schön, wenn man dies grafisch darstellen kann, z. B. mit kleinen Schiffen oder Herzen anstelle einer Zahl.

Was soll gebaut werden?

Füge deinem Spiel Folgendes hinzu:

Punktestand: Für jedes feindliche Schiff, das zerstört wird, sollte der Held Punkte erhalten. Wir schlagen 100 Punkte pro Schiff vor. Der Punktestand sollte unten links angezeigt werden.
Leben: Dein Schiff hat drei Leben. Du verlierst ein Leben, jedes Mal wenn ein feindliches Schiff mit dir kollidiert. Die Lebensanzeige sollte unten rechts angezeigt werden und aus der folgenden Grafik bestehen: .

Empfohlene Schritte

Finde die Dateien, die für dich im Unterordner your-work erstellt wurden. Sie sollten Folgendes enthalten:

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

Starte dein Projekt im Ordner your_work, indem du Folgendes eingibst:

cd your-work
npm start

Das oben Genannte startet einen HTTP-Server unter der Adresse http://localhost:5000. Öffne einen Browser und gib diese Adresse ein. Derzeit sollten der Held und alle Feinde angezeigt werden, und wenn du die Pfeiltasten links und rechts drückst, bewegt sich der Held und kann Feinde abschießen.

Code hinzufügen

Kopiere die benötigten Assets aus dem Ordner solution/assets/ in den Ordner your-work; du wirst ein life.png-Asset hinzufügen. Füge das lifeImg zur Funktion window.onload hinzu:
```
lifeImg = await loadTexture("assets/life.png");
```

Füge das lifeImg zur Liste der Assets hinzu:

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

Variablen hinzufügen. Füge Code hinzu, der deinen Gesamtpunktestand (0) und die verbleibenden Leben (3) darstellt, und zeige diese Werte auf dem Bildschirm an.

Erweitere die Funktion updateGameObjects(). Erweitere die Funktion updateGameObjects(), um Kollisionen mit Feinden zu behandeln:

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

Füge Leben und Punkte hinzu.

Initialisiere Variablen. Unter this.cooldown = 0 in der Klasse Hero setze Leben und Punkte:
```
this.life = 3;
this.points = 0;
```

Zeichne Variablen auf den Bildschirm. Zeige diese Werte auf dem Bildschirm an:

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

Füge Methoden zur Spielschleife hinzu. Stelle sicher, dass du diese Funktionen zur Funktion window.onload unter updateGameObjects() hinzufügst:
```
drawPoints();
drawLife();
```

Implementiere Spielregeln. Implementiere die folgenden Spielregeln:

Für jede Kollision zwischen Held und Feind ziehe ein Leben ab.

Erweitere die Klasse Hero, um diese Abzüge vorzunehmen:
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```

Für jeden Laser, der einen Feind trifft, erhöhe den Punktestand um 100 Punkte.

Erweitere die Klasse Hero, um diese Erhöhung vorzunehmen:

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

Füge diese Funktionen zu deinen Collision Event Emitters hinzu:

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

✅ Recherchiere ein wenig, um andere Spiele zu entdecken, die mit JavaScript/Canvas erstellt wurden. Was sind ihre gemeinsamen Merkmale?

Am Ende dieser Arbeit solltest du die kleinen 'Lebens'-Schiffe unten rechts, Punkte unten links sehen und beobachten können, wie deine Lebensanzahl bei Kollisionen mit Feinden abnimmt und deine Punkte steigen, wenn du Feinde abschießt. Gut gemacht! Dein Spiel ist fast fertig.

🚀 Herausforderung

Dein Code ist fast fertig. Kannst du dir die nächsten Schritte vorstellen?

Quiz nach der Lektion

Überprüfung & Selbststudium

Recherchiere einige Möglichkeiten, wie du Punktestände und Leben in einem Spiel erhöhen und verringern kannst. Es gibt einige interessante Spiel-Engines wie PlayFab. Wie könnte die Verwendung einer solchen Engine dein Spiel verbessern?

Aufgabe

Baue ein Punktespiel

Haftungsausschluss:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst Co-op Translator übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.