2D-Breakout-Spiel mit reinem JavaScript
In dieser Schritt-für-Schritt-Anleitung erstellen wir ein einfaches, für Mobilgeräte geeignetes MDN Breakout-Spiel. Dafür verwenden wir ausschließlich JavaScript, ohne externe Bibliotheken.
Zu jedem Schritt gibt es bearbeitbare, interaktive Beispiele, die Sie ausprobieren können. So sehen Sie, wie die Zwischenstände aussehen sollten. Sie lernen die Grundlagen wichtiger Spielmechaniken kennen: die Arbeit mit dem Canvas, das Rendern und Bewegen von Bildern, die Kollisionserkennung, die Steuerung, Animationen und Tweens sowie Zustände für Sieg und Niederlage.
Um möglichst viel aus dieser Artikelreihe mitzunehmen, sollten Sie bereits über grundlegende bis mittlere JavaScript-Kenntnisse verfügen. Nach Abschluss dieser Anleitung sollten Sie in der Lage sein, eigene einfache Webspiele zu entwickeln.
Hinweis: Zu diesem Leitfaden gibt es einen begleitenden Leitfaden: 2D-Breakout-Spiel mit Phaser. Beide folgen im Wesentlichen denselben Schritten und führen zu optisch identischen Ergebnissen.
Lektionen im Überblick
Nächste Schritte
Legen wir los! Beginnen Sie mit dem ersten Teil der Reihe: Canvas initialisieren.