2D-Breakout-Spiel mit Phaser

In diesem Schritt-für-Schritt-Tutorial erstellen wir ein einfaches mobiles MDN Breakout-Spiel, das in JavaScript geschrieben wird, unter Verwendung des Phaser Frameworks.

Jeder Schritt enthält editierbare, live Beispiele, mit denen Sie experimentieren können, um zu sehen, wie die Zwischenstufen aussehen sollten. Sie lernen die Grundlagen der Verwendung des Phaser-Frameworks, um grundlegende Spielmechaniken wie Rendern und Bewegen von Bildern, Kollisionsdetektion, Steuerungsmechanismen, Framework-spezifische Hilfsfunktionen, Animationen und Tweens sowie Gewinn- und Verlustzustände zu implementieren.

Um das Beste aus dieser Artikelserie herauszuholen, sollten Sie bereits über grundlegende bis mittlere JavaScript-Kenntnisse verfügen. Nach der Bearbeitung dieses Tutorials sollten Sie in der Lage sein, Ihre eigenen einfachen Webspiele mit Phaser zu entwickeln.

Gameplay-Bildschirm des Spiels MDN Breakout, das mit Phaser erstellt wurde. Sie können Ihren Schläger verwenden, um den Ball abzuprallen und das Ziegelfeld zu zerstören, während Sie die Punkte und Leben behalten.

Lektion Details

Alle Lektionen — und die verschiedenen Versionen des MDN Breakout-Spiels, die wir gemeinsam entwickeln — sind auf GitHub verfügbar:

  1. Framework initialisieren
  2. Skalierung
  3. Laden Sie die Assets und drucken Sie sie auf dem Bildschirm
  4. Bewegen Sie den Ball
  5. Physik
  6. Von den Wänden abprallen
  7. Spieler-Schläger und Steuerungen
  8. Spielende
  9. Bauen Sie das Ziegelfeld
  10. Kollisionsdetektion
  11. Der Punktestand
  12. Gewinnen Sie das Spiel
  13. Zusätzliche Leben
  14. Animationen und Tweens
  15. Buttons
  16. Das Gameplay randomisieren

Ein Hinweis zu Lernpfaden — der Einstieg mit reinem JavaScript ist der beste Weg, um ein fundiertes Wissen über die Entwicklung von Webspielen zu erhalten. Wenn Sie mit der Entwicklung von Spielen mit reinem JavaScript nicht bereits vertraut sind, empfehlen wir Ihnen, zunächst den Gegenpart dieser Serie, 2D-Breakout-Spiel mit reinem JavaScript, durchzuarbeiten.

Danach können Sie jedes beliebige Framework auswählen und es für Ihre Projekte verwenden. Wir haben uns für Phaser entschieden, da es ein solides Framework mit guter Unterstützung und verfügbarer Community sowie einem guten Satz von Plugins ist. Frameworks verkürzen die Entwicklungszeit und helfen, die langweiligen Teile zu übernehmen, sodass Sie sich auf die unterhaltsamen Dinge konzentrieren können. Allerdings sind Frameworks nicht immer perfekt, daher benötigen Sie etwas Wissen in reinem JavaScript, falls etwas Unerwartetes passiert oder Sie eine Funktionalität schreiben möchten, die das Framework nicht bietet.

Hinweis: Diese Artikelserie kann als Material für praktische Workshops zur Spieleentwicklung verwendet werden. Sie können auch das auf diesem Tutorial basierende Gamedev Phaser Content Kit nutzen, wenn Sie einen Vortrag über Spieleentwicklung mit Phaser halten möchten.

Nächste Schritte

Gut, lassen Sie uns anfangen! Gehen Sie zum ersten Teil der Serie — Framework initialisieren.