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 enthält bearbeitbare, Live-Beispiele, mit denen Sie experimentieren können, um zu sehen, wie die Zwischenschritte aussehen sollten. Sie lernen die Grundlagen der Verwendung des <canvas>-Elements, um grundlegende 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. Nach der Bearbeitung dieses Tutorials sollten Sie in der Lage sein, Ihre eigenen Web-Spiele zu entwickeln.

Spielbildschirm aus dem Spiel MDN Breakout, bei dem Sie Ihr Paddle verwenden können, um den Ball abprallen zu lassen und das Ziegelspielfeld zu zerstören, wobei Sie die Punktzahl und Leben halten.

Lektionen Details

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

  1. Erstellen Sie das Canvas und zeichnen Sie darauf
  2. Bewegung des Balls
  3. Abprallen an den Wänden
  4. Schläger- und Tastatursteuerung
  5. Spielende
  6. Erstellen Sie das Ziegelspielfeld
  7. Kollisionsdetektion
  8. Verfolgen Sie die Punktzahl und gewinnen Sie
  9. Maussteuerung
  10. Abschluss

Mit reinem JavaScript anzufangen, ist der beste Weg, um eine solide Grundlage in der Web-Spieleentwicklung zu erlangen. Danach können Sie jedes gewünschte Framework auswählen und es für Ihre Projekte verwenden. Frameworks sind nur Werkzeuge, die mit der JavaScript-Sprache erstellt wurden; selbst wenn Sie planen, mit ihnen zu arbeiten, ist es gut, zunächst die Sprache selbst zu lernen, um zu wissen, was genau unter der Haube passiert. Frameworks beschleunigen die Entwicklungszeit und helfen, langweilige Teile des Spiels zu vereinfachen, aber wenn etwas nicht wie erwartet funktioniert, können Sie immer versuchen, das Problem zu debuggen oder eigene Lösungen in reinem JavaScript zu schreiben.

Hinweis: Diese Artikelserie kann als Material für praktische Spielentwicklungsworkshops verwendet werden. Sie können auch das auf diesem Tutorial basierende Gamedev Canvas Content Kit nutzen, wenn Sie einen Vortrag über Spielentwicklung im Allgemeinen halten möchten.

Wenn Sie daran interessiert sind, eine Spielebibliothek zum Lernen der 2D-Web-Spieleentwicklung zu verwenden, sehen Sie sich das Gegenstück dieser Serie an, 2D Breakout-Spiel mit Phaser.

Nächste Schritte

Ok, legen wir los! Gehen Sie zum ersten Kapitel Erstellen Sie das Canvas und zeichnen Sie darauf.