2D-Breakout-Spiel mit Phaser
In diesem Schritt-für-Schritt-Tutorial erstellen wir mit dem Framework Phaser ein einfaches, in JavaScript geschriebenes MDN-Breakout-Spiel für Mobilgeräte.
Zu jedem Schritt gibt es bearbeitbare, interaktive Beispiele, mit denen Sie experimentieren können. So sehen Sie, wie die Zwischenstände aussehen sollten. Sie lernen die Grundlagen des Phaser-Frameworks kennen, um grundlegende Spielmechaniken umzusetzen: das Darstellen und Bewegen von Bildern, die Kollisionserkennung, Steuerungsmöglichkeiten, frameworkspezifische Hilfsfunktionen, Animationen und Tweens sowie Gewinn- und Verlustzustände.
Um möglichst viel aus dieser Artikelreihe mitzunehmen, sollten Sie bereits über grundlegende bis fortgeschrittene JavaScript-Kenntnisse verfügen. Nach Abschluss dieses Tutorials sollten Sie eigene einfache Webspiele mit Phaser entwickeln können.
Hinweis: Zu diesem Leitfaden gibt es einen ergänzenden Leitfaden: 2D-Breakout-Spiel mit reinem JavaScript. Beide folgen im Wesentlichen denselben Schritten und führen zu optisch identischen Ergebnissen.
Wir haben Phaser für dieses Projekt gewählt, weil es von Browsern gut unterstützt wird, eine aktive Community hat und eine gute Auswahl an Plugins bietet. Frameworks beschleunigen die Entwicklung und übernehmen lästige Aufgaben, sodass Sie sich auf die interessanten Teile konzentrieren können. Allerdings sind Frameworks nicht immer perfekt. Wenn etwas Unerwartetes passiert oder Sie eine Funktionalität schreiben möchten, die das Framework nicht bereitstellt, benötigen Sie daher Kenntnisse in reinem JavaScript.
Lektionen im Überblick
Nächste Schritte
Fangen wir an! Beginnen Sie mit dem ersten Teil der Reihe: Framework initialisieren.