History

leestott 7cfaffabb5 🌐 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

Baue ein Weltraumspiel Teil 6: Beenden und Neustarten

Quiz vor der Vorlesung

Es gibt verschiedene Möglichkeiten, eine Endbedingung in einem Spiel auszudrücken. Es liegt an dir als Ersteller des Spiels zu entscheiden, warum das Spiel endet. Hier sind einige Gründe, wenn wir davon ausgehen, dass wir über das Weltraumspiel sprechen, das du bisher gebaut hast:

N feindliche Schiffe wurden zerstört: Es ist ziemlich üblich, dass man in einem Spiel, das in verschiedene Level unterteilt ist, N feindliche Schiffe zerstören muss, um ein Level abzuschließen.
Dein Schiff wurde zerstört: Es gibt definitiv Spiele, bei denen du verlierst, wenn dein Schiff zerstört wird. Eine andere gängige Herangehensweise ist das Konzept von Leben. Jedes Mal, wenn dein Schiff zerstört wird, wird ein Leben abgezogen. Sobald alle Leben verloren sind, verlierst du das Spiel.
Du hast N Punkte gesammelt: Eine weitere häufige Endbedingung ist das Sammeln von Punkten. Wie du Punkte erhältst, bleibt dir überlassen, aber es ist ziemlich üblich, Punkte für verschiedene Aktivitäten zu vergeben, wie z. B. das Zerstören eines feindlichen Schiffs oder das Sammeln von Gegenständen, die beim Zerstören fallen gelassen werden.
Ein Level abschließen: Dies könnte mehrere Bedingungen umfassen, wie z. B. X zerstörte feindliche Schiffe, Y gesammelte Punkte oder vielleicht das Einsammeln eines bestimmten Gegenstands.

Neustarten

Wenn Menschen dein Spiel mögen, möchten sie es wahrscheinlich erneut spielen. Sobald das Spiel aus irgendeinem Grund endet, solltest du eine Möglichkeit anbieten, es neu zu starten.

✅ Überlege dir, unter welchen Bedingungen ein Spiel für dich endet und wie du dazu aufgefordert wirst, es neu zu starten.

Was du bauen sollst

Du wirst diese Regeln zu deinem Spiel hinzufügen:

Das Spiel gewinnen. Sobald alle feindlichen Schiffe zerstört sind, gewinnst du das Spiel. Zeige zusätzlich eine Art Siegesnachricht an.
Neustart. Sobald alle Leben verloren sind oder das Spiel gewonnen wurde, solltest du eine Möglichkeit anbieten, das Spiel neu zu starten. Denke daran! Du musst das Spiel neu initialisieren und den vorherigen Spielzustand löschen.

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
  -| life.png
-| index.html
-| app.js
-| package.json

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

cd your-work
npm start

Das obige Kommando startet einen HTTP-Server unter der Adresse http://localhost:5000. Öffne einen Browser und gib diese Adresse ein. Dein Spiel sollte spielbereit sein.

Tipp: Um Warnungen in Visual Studio Code zu vermeiden, bearbeite die Funktion window.onload, sodass sie gameLoopId direkt aufruft (ohne let), und deklariere gameLoopId oben in der Datei unabhängig: let gameLoopId;

Code hinzufügen

Endbedingung verfolgen. Füge Code hinzu, der die Anzahl der Feinde oder die Zerstörung des Helden-Schiffs verfolgt, indem du diese beiden Funktionen hinzufügst:

function isHeroDead() {
  return hero.life <= 0;
}

function isEnemiesDead() {
  const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
  return enemies.length === 0;
}

Logik zu Nachrichten-Handlern hinzufügen. Bearbeite den eventEmitter, um diese Bedingungen zu behandeln:

eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
    first.dead = true;
    second.dead = true;
    hero.incrementPoints();

    if (isEnemiesDead()) {
      eventEmitter.emit(Messages.GAME_END_WIN);
    }
});

eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
    enemy.dead = true;
    hero.decrementLife();
    if (isHeroDead())  {
      eventEmitter.emit(Messages.GAME_END_LOSS);
      return; // loss before victory
    }
    if (isEnemiesDead()) {
      eventEmitter.emit(Messages.GAME_END_WIN);
    }
});

eventEmitter.on(Messages.GAME_END_WIN, () => {
    endGame(true);
});

eventEmitter.on(Messages.GAME_END_LOSS, () => {
  endGame(false);
});

Neue Nachrichtentypen hinzufügen. Füge diese Nachrichten dem Konstanten-Objekt hinzu:
```
GAME_END_LOSS: "GAME_END_LOSS",
GAME_END_WIN: "GAME_END_WIN",
```
Code für Neustart hinzufügen. Füge Code hinzu, der das Spiel durch Drücken einer ausgewählten Taste neu startet.
1. Auf Tastendruck Enter hören. Bearbeite den EventListener deines Fensters, um auf diesen Tastendruck zu hören:
```
 else if(evt.key === "Enter") {
    eventEmitter.emit(Messages.KEY_EVENT_ENTER);
  }
```
1. Neustart-Nachricht hinzufügen. Füge diese Nachricht deinem Nachrichten-Konstanten hinzu:
```
KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
```

Spielregeln implementieren. Implementiere die folgenden Spielregeln:

Spieler-Siegesbedingung. Wenn alle feindlichen Schiffe zerstört sind, zeige eine Siegesnachricht an.

Erstelle zuerst eine Funktion displayMessage():

function displayMessage(message, color = "red") {
  ctx.font = "30px Arial";
  ctx.fillStyle = color;
  ctx.textAlign = "center";
  ctx.fillText(message, canvas.width / 2, canvas.height / 2);
}

Erstelle eine Funktion endGame():

function endGame(win) {
  clearInterval(gameLoopId);

  // set a delay so we are sure any paints have finished
  setTimeout(() => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    if (win) {
      displayMessage(
        "Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
        "green"
      );
    } else {
      displayMessage(
        "You died !!! Press [Enter] to start a new game Captain Pew Pew"
      );
    }
  }, 200)  
}

Neustart-Logik. Wenn alle Leben verloren sind oder der Spieler das Spiel gewonnen hat, zeige an, dass das Spiel neu gestartet werden kann. Starte das Spiel zusätzlich neu, wenn die Neustart-Taste gedrückt wird (du kannst entscheiden, welche Taste dem Neustart zugeordnet wird).

Erstelle die Funktion resetGame():

function resetGame() {
  if (gameLoopId) {
    clearInterval(gameLoopId);
    eventEmitter.clear();
    initGame();
    gameLoopId = setInterval(() => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = "black";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      drawPoints();
      drawLife();
      updateGameObjects();
      drawGameObjects(ctx);
    }, 100);
  }
}

Füge einen Aufruf zum eventEmitter hinzu, um das Spiel in initGame() zurückzusetzen:
```
eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
  resetGame();
});
```
Füge dem EventEmitter eine Funktion clear() hinzu:
```
clear() {
  this.listeners = {};
}
```

👽 💥 🚀 Glückwunsch, Captain! Dein Spiel ist fertig! Gut gemacht! 🚀 💥 👽

🚀 Herausforderung

Füge einen Sound hinzu! Kannst du einen Sound hinzufügen, um dein Spielerlebnis zu verbessern, vielleicht bei einem Lasertreffer, wenn der Held stirbt oder gewinnt? Schau dir dieses Sandbox-Beispiel an, um zu lernen, wie man mit JavaScript Sound abspielt.

Quiz nach der Vorlesung

Rückblick & Selbststudium

Deine Aufgabe ist es, ein neues Beispielspiel zu erstellen. Erkunde einige der interessanten Spiele da draußen, um zu sehen, welche Art von Spiel du bauen könntest.

Aufgabe

Erstelle ein Beispielspiel

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 aus der Nutzung dieser Übersetzung entstehen.