Extraleben

Fügen Sie die folgenden neuen Variablen unterhalb der bestehenden in Ihrem Code hinzu:

let lives = 3;
let livesText;
let lifeLostText;

Diese speichern jeweils die Anzahl der Leben, das Textlabel, das die verbleibende Anzahl an Leben anzeigt, und ein Textlabel, das angezeigt wird, wenn der Spieler eines seiner Leben verliert.

Die Definition der Texte sieht ähnlich aus wie das, was wir bereits in der [Punkte]-Lektion (/de/docs/Games/Tutorials/2D_breakout_game_Phaser/The_score) gemacht haben. Fügen Sie die folgenden Zeilen unterhalb der bestehenden scoreText-Definition in Ihrer create() Funktion hinzu:

livesText = game.add.text(game.world.width - 5, 5, `Lives: ${lives}`, {
  font: "18px Arial",
  fill: "#0095DD",
});
livesText.anchor.set(1, 0);
lifeLostText = game.add.text(
  game.world.width * 0.5,
  game.world.height * 0.5,
  "Life lost, click to continue",
  { font: "18px Arial", fill: "#0095DD" },
);
lifeLostText.anchor.set(0.5);
lifeLostText.visible = false;

Die Objekte livesText und lifeLostText ähneln sehr dem scoreText — sie definieren eine Position auf dem Bildschirm, den tatsächlichen anzuzeigenden Text und das Schriftstyling. Ersteres ist an seiner oberen rechten Kante verankert, um richtig mit dem Bildschirm auszurichten, und letzteres ist zentriert, beide mit anchor.set().

Das lifeLostText wird nur angezeigt, wenn ein Leben verloren wird, daher ist seine Sichtbarkeit anfänglich auf false gesetzt.

Wie Sie wahrscheinlich bemerkt haben, verwenden wir für alle drei Texte dasselbe Styling: scoreText, livesText und lifeLostText. Wenn wir jemals die Schriftgröße oder Farbe ändern wollen, müssen wir dies an mehreren Stellen tun. Um es uns in Zukunft einfacher zu machen, können wir eine separate Variable erstellen, die unser Styling enthält, nennen wir sie textStyle und platzieren sie vor den Textdefinitionen:

textStyle = { font: "18px Arial", fill: "#0095DD" };

Wir können nun diese Variable beim Stylen unserer Textlabels verwenden — aktualisieren Sie Ihren Code so, dass die mehrfachen Instanzen des Textstylings durch die Variable ersetzt werden:

scoreText = game.add.text(5, 5, "Points: 0", textStyle);
livesText = game.add.text(
  game.world.width - 5,
  5,
  `Lives: ${lives}`,
  textStyle,
);
livesText.anchor.set(1, 0);
lifeLostText = game.add.text(
  game.world.width * 0.5,
  game.world.height * 0.5,
  "Life lost, click to continue",
  textStyle,
);
lifeLostText.anchor.set(0.5);
lifeLostText.visible = false;

Auf diese Weise wird beim Ändern der Schriftart in einer Variable die Änderung überall dort angewendet, wo sie verwendet wird.

Um Leben in unserem Spiel zu implementieren, ändern wir zunächst die Funktion des Balls, die an das onOutOfBounds-Ereignis gebunden ist. Anstatt sofort eine anonyme Funktion auszuführen und die Warnung anzuzeigen:

ball.events.onOutOfBounds.add(() => {
  alert("Game over!");
  location.reload();
}, this);

Weisen wir eine neue Funktion namens ballLeaveScreen zu; löschen Sie den vorherigen Ereignishandler (oben gezeigt) und ersetzen Sie ihn durch die folgende Zeile:

ball.events.onOutOfBounds.add(ballLeaveScreen, this);

Wir möchten die Anzahl der Leben jedes Mal verringern, wenn der Ball die Leinwand verlässt. Fügen Sie die Definition der Funktion ballLeaveScreen() am Ende unseres Codes hinzu:

function ballLeaveScreen() {
  lives--;
  if (lives) {
    livesText.setText(`Lives: ${lives}`);
    lifeLostText.visible = true;
    ball.reset(game.world.width * 0.5, game.world.height - 25);
    paddle.reset(game.world.width * 0.5, game.world.height - 5);
    game.input.onDown.addOnce(() => {
      lifeLostText.visible = false;
      ball.body.velocity.set(150, -150);
    }, this);
  } else {
    alert("You lost, game over!");
    location.reload();
  }
}

Anstatt sofort die Warnung auszugeben, wenn Sie ein Leben verlieren, ziehen wir zuerst ein Leben von der aktuellen Anzahl ab und prüfen, ob es ein nicht-nullwert ist. Wenn ja, dann hat der Spieler noch einige Leben übrig und kann weiterspielen — er sieht die Nachricht über das verlorene Leben, die Ball- und Schlägerpositionen werden auf dem Bildschirm zurückgesetzt und bei der nächsten Eingabe (Klick oder Berührung) wird die Nachricht ausgeblendet und der Ball beginnt sich erneut zu bewegen.

Wenn die Anzahl der verfügbaren Leben null erreicht, ist das Spiel vorbei und die Game-Over-Warnung wird angezeigt.

Sie haben wahrscheinlich die Aufrufe der add() und addOnce() Methode in den obigen zwei Codeblöcken bemerkt und sich gefragt, wie sie sich unterscheiden. Der Unterschied besteht darin, dass die add() Methode die gegebene Funktion bindet und dazu führt, dass sie jedes Mal ausgeführt wird, wenn das Ereignis eintritt, während addOnce() nützlich ist, wenn Sie möchten, dass die gebundene Funktion nur einmal ausgeführt und dann entbunden wird, damit sie nicht erneut ausgeführt wird. In unserem Fall wird bei jedem outOfBounds-Ereignis ballLeaveScreen ausgeführt, aber wenn der Ball den Bildschirm verlässt, möchten wir die Nachricht nur einmal vom Bildschirm entfernen.

Sie können den fertigen Code für diese Lektion im folgenden Live-Demo überprüfen und damit spielen, um besser zu verstehen, wie er funktioniert:

Leben machen das Spiel nachsichtiger — wenn Sie ein Leben verlieren, haben Sie immer noch zwei weitere übrig und können weiterspielen. Lassen Sie uns nun das Aussehen und das Gefühl des Spiels durch das Hinzufügen von Animationen und Tweens erweitern.

• Zurück
• Weiter