Gewinnen Sie das Spiel

Dies ist der 12. Schritt von 16 des Gamedev Phaser Tutorials. Sie können den Quellcode, wie er nach Abschluss dieser Lektion aussehen sollte, unter Gamedev-Phaser-Content-Kit/demos/lesson12.html finden.

Die Implementierung des Gewinnens in unserem Spiel ist ganz einfach: Wenn Sie alle Steine zerstören, gewinnen Sie.

Wie gewinnt man?

Fügen Sie den folgenden neuen Code in Ihre ballHitBrick()-Funktion hinzu:

js
function ballHitBrick(ball, brick) {
  brick.kill();
  score += 10;
  scoreText.setText(`Points: ${score}`);

  const countAlive = bricks.children.filter((b) => b.alive).length;
  if (countAlive === 0) {
    alert("You won the game, congratulations!");
    location.reload();
  }
}

Wir durchlaufen die Steine in der Gruppe mit bricks.children und überprüfen das Leben jedes Steins mit der .alive-Eigenschaft. Wenn keine Steine mehr leben, zeigen wir eine Gewinnnachricht an und starten das Spiel neu, sobald die Meldung geschlossen wird.

Vergleichen Sie Ihren Code

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

Nächste Schritte

Sowohl das Verlieren als auch das Gewinnen sind implementiert, sodass das Kerngameplay unseres Spiels abgeschlossen ist. Jetzt fügen wir etwas Extra hinzu — wir geben dem Spieler drei Leben anstelle von einem.