2D Breakout-Spiel mit purem 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.

Zu jedem Schritt gibt es editierbare, 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, die Kollisionserkennung, Steuerungsmechanismen 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 Webspiele zu erstellen.

Gameplay-Bildschirm des Spiels MDN Breakout, bei dem Sie Ihren Schläger verwenden können, um den Ball abzuprallen und das Ziegelsteinfeld zu zerstören, während Sie den Punktestand und die Leben behalten.

Lektionen-Details

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

  1. Das Canvas erstellen und darauf zeichnen
  2. Den Ball bewegen
  3. Von den Wänden abprallen
  4. Schläger und Tastatursteuerung
  5. Spielende
  6. Das Ziegelsteinfeld erstellen
  7. Kollisionserkennung
  8. Den Punktestand verfolgen und gewinnen
  9. Maussteuerung
  10. Abschließen

Der Einstieg mit reinem JavaScript ist der beste Weg, um solide Kenntnisse in der Web-Entwicklung von Spielen zu erlangen. Danach können Sie jedes beliebige Framework auswählen und es für Ihre Projekte verwenden. Frameworks sind lediglich Werkzeuge, die mit der JavaScript-Sprache erstellt wurden. Selbst wenn Sie also planen, mit diesen zu arbeiten, ist es gut, zuerst die Sprache selbst zu lernen, um genau zu verstehen, was hinter den Kulissen passiert. Frameworks beschleunigen die Entwicklungszeit und helfen bei der Bewältigung der langweiligen Teile des Spiels, aber wenn etwas nicht wie erwartet funktioniert, können Sie immer versuchen, dies zu debuggen oder einfach Ihre eigenen Lösungen in reinem JavaScript zu schreiben.

Hinweis: Diese Artikelserie kann als Material für praxisnahe Workshops zur Spieleentwicklung genutzt werden. Sie können auch das Gamedev Canvas Content Kit verwenden, das auf diesem Tutorial basiert, wenn Sie einen Vortrag über Spieleentwicklung im Allgemeinen halten möchten.

Wenn Sie daran interessiert sind, eine Spielbibliothek zu verwenden, um etwas über die Entwicklung von 2D-Webspielen zu lernen, sehen Sie sich das Gegenstück dieser Serie, 2D Breakout-Spiel mit Phaser, an.

Nächste Schritte

Ok, lassen Sie uns beginnen! Gehen Sie zum ersten Kapitel Das Canvas erstellen und darauf zeichnen.