2D-Breakout-Spiel mit Phaser
In diesem Schritt-für-Schritt-Tutorial erstellen wir ein einfaches mobiles MDN-Breakout-Spiel, das in JavaScript geschrieben ist und das Phaser-Framework verwendet.
Jeder Schritt enthält bearbeitbare, interaktive Beispiele, mit denen Sie sehen können, wie die Zwischenschritte aussehen sollten. Sie lernen die Grundlagen der Verwendung des Phaser-Frameworks, um grundlegende Spielmechaniken wie das Rendern und Bewegen von Bildern, Kollisionsdetektion, Steuermechanismen, framework-spezifische Hilfsfunktionen, Animationen und Tweens sowie Gewinn- und Verlustzustände zu implementieren.
Um das Beste aus dieser Artikelreihe herauszuholen, sollten Sie bereits über grundlegende bis mittlere Kenntnisse in JavaScript verfügen. Nachdem Sie dieses Tutorial durchgearbeitet haben, sollten Sie in der Lage sein, Ihre eigenen einfachen Webspiele mit Phaser zu erstellen.
Unterrichtsdetails
Alle Lektionen—und die verschiedenen Versionen des MDN-Breakout-Spiels, die wir zusammen erstellen—sind auf GitHub verfügbar:
- Framework initialisieren
- Skalierung
- Die Assets laden und auf dem Bildschirm anzeigen
- Den Ball bewegen
- Physik
- Von den Wänden abprallen
- Spielerpaddle und Steuerung
- Spielende
- Das Ziegelspielfeld bauen
- Kollisionsdetektion
- Die Punktzahl
- Das Spiel gewinnen
- Zusätzliche Leben
- Animationen und Tweens
- Buttons
- Spielablauf randomisieren
Hinweis zu Lernpfaden: Wenn Sie mit reinem JavaScript beginnen, erhalten Sie das beste Wissen über die Webspiele-Entwicklung. Falls Sie mit der reinen JavaScript-Spielentwicklung nicht vertraut sind, empfehlen wir Ihnen zunächst, das Gegenstück dieser Serie durchzuarbeiten: 2D-Breakout-Spiel mit reinem JavaScript.
Danach können Sie jedes beliebige Framework wählen und für Ihre Projekte verwenden. Wir haben uns für Phaser entschieden, da es eine gute Browserkompatibilität, eine aktive Community und eine gute Auswahl an Plugins bietet. Frameworks beschleunigen die Entwicklungszeit und kümmern sich um die langweiligen Teile, sodass Sie sich auf die unterhaltsamen Sachen konzentrieren können. Frameworks sind jedoch nicht immer perfekt, daher benötigen Sie etwas reines JavaScript-Wissen, falls etwas Unerwartetes geschieht oder Sie eine Funktionalität schreiben möchten, die das Framework nicht bietet.
Nächste Schritte
Okay, lassen Sie uns beginnen! Gehen Sie zum ersten Teil der Serie—Framework initialisieren.