2D Breakout-Spiel mit reinem JavaScript
In diesem Schritt-für-Schritt-Tutorial erstellen wir ein MDN Breakout-Spiel, das vollständig in reinem JavaScript geschrieben und auf einem HTML <canvas> gerendert wird.
Jeder Schritt bietet editierbare, interaktive Beispiele, mit denen Sie experimentieren können, um zu sehen, wie die Zwischenstufen aussehen sollten. Sie werden die Grundlagen der Verwendung des <canvas>-Elements erlernen, um wesentliche Spielmechaniken wie das Rendern und Bewegen von Bildern, Kollisionsdetektion, Steuermechanismen 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. Nachdem Sie dieses Tutorial durchgearbeitet haben, sollten Sie in der Lage sein, Ihre eigenen Web-Spiele zu entwickeln.
Lektiondetails
Alle Lektionen — und die verschiedenen Versionen des MDN Breakout-Spiels, die wir gemeinsam erstellen — sind auf GitHub verfügbar:
- Das Canvas erstellen und darauf zeichnen
- Ball bewegen
- Von den Wänden abprallen
- Paddel- und Tastatursteuerungen
- Spielende
- Das Ziegel-Feld bauen
- Kollisionsdetektion
- Punkte verfolgen und gewinnen
- Maussteuerungen
- Abschluss
Mit reinem JavaScript zu beginnen ist der beste Weg, um sich ein solides Wissen über die Entwicklung von Webspielen anzueignen. Danach können Sie ein Framework Ihrer Wahl auswählen und es für Ihre Projekte verwenden. Frameworks sind lediglich Werkzeuge, die mit der JavaScript-Sprache erstellt wurden; auch wenn Sie also planen, mit ihnen zu arbeiten, ist es gut, zuerst etwas über die Sprache selbst zu lernen, um genau zu wissen, was im Hintergrund vor sich geht. Frameworks beschleunigen die Entwicklungszeit und helfen, langweilige Teile des Spiels zu übernehmen, aber wenn etwas nicht wie erwartet funktioniert, können Sie immer versuchen, das zu debuggen oder einfach Ihre eigenen Lösungen in reinem JavaScript zu schreiben.
Hinweis: Diese Artikelserie kann als Material für praxisnahe Spielentwicklungs-Workshops verwendet werden. Sie können auch das Gamedev Canvas Content Kit basierend auf diesem Tutorial nutzen, wenn Sie einen Vortrag über Spielentwicklung im Allgemeinen halten möchten.
Wenn Sie daran interessiert sind, eine Spiele-Bibliothek zu verwenden, um mehr über die 2D-Webspielentwicklung zu lernen, sehen Sie sich das Gegenstück dieser Serie an, 2D Breakout-Spiel mit Phaser.
Nächste Schritte
Ok, lassen Sie uns anfangen! Gehen Sie zum ersten Kapitel Das Canvas erstellen und darauf zeichnen.