7 days of WordPress themes, graphics & videos - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Game Development
  2. Game Design

Erstellen eines Pong-Spiels mit EaselJS in HTML5

Scroll to top
Read Time: 12 mins

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

In diesem Tutorial erstellen wir mithilfe der EaselJS-Bibliothek einen Klon des klassischen Spiels Pong in HTML5. Das Spiel wird mehrere Bildschirme, Soundeffekte und einen (sehr einfachen) KI-Gegner haben.

Schritt 1: Kurze Übersicht

Mit vorgefertigten Grafiken werden wir ein unterhaltsames Pong-Spiel in HTML5 mithilfe der EaselJS-Bibliothek codieren, die eine Flash-ähnliche Oberfläche für die HTML5-Zeichenfläche bietet. Eine Einführung in EaselJS finden Sie in diesem Activetuts+ Artikel.

Der Spieler kann ein Paddel mit der Maus steuern und gegen den Computer-Controller-Gegner spielen, um Punkte zu erhalten.


Schritt 2: Schnittstelle

Es wird eine einfache Oberfläche mit einem neofuturistischen Stil verwendet. Dies umfasst mehrere Formen, Schaltflächen, Bitmaps und mehr.

Die für dieses Tutorial erforderlichen Grafiken finden Sie im angehängten Download.


Schritt 3: Holen Sie sich EaselJS

Die EaselJS-Bibliothek wird zum Erstellen unseres Spiels verwendet. Lesen Sie das Tutorial Erste Schritte, wenn Sie neu in dieser Bibliothek sind.

Sie können die neueste Version von EaselJS von der offiziellen Website herunterladen. Dies kann jedoch mit dem Code hier nicht kompatibel sein. Ich empfehle daher, die Version der Bibliothek zu verwenden, die im Quelldownload enthalten ist.


Schritt 4: HTML-Struktur

Bereiten wir unser HTML-Dokument vor. Wir beginnen mit den Grundlagen, nur einem Überblick über die Barebones:


Schritt 5: Mobile Highlight ausblenden

Wir müssen auch ein wenig CSS hinzufügen, um die Standardhervorhebung zu entfernen, die angewendet wird, wenn Sie in einem mobilen Browser auf ein Element tippen. Ohne dies würde das mobile Erlebnis drastisch abnehmen.


Schritt 6: Javascript-Bibliotheken

Der folgende Code fügt die erforderlichen Javascript-Bibliotheken hinzu, damit unsere App funktioniert.

Neben EaselJS verwenden wir auch TweenJS (für die Bearbeitung von Bildschirmübergängen und der Spieleschleife) und SoundJS (für die Soundeffekte).

Main.js ist die Datei, in der wir unseren eigenen JS-Code speichern.


Schritt 7: Hauptfunktion aufrufen

In den nächsten Zeilen rufen wir unsere Main() -Funktion auf. Dies ist die Funktion, mit der unsere Anwendung gestartet wird. Es wird später im Tutorial in Main.js erstellt.


Schritt 8: Canvas Tag

In dieser Zeile wird eine HTML5-Zeichenfläche erstellt. Wir weisen ihm eine ID zu, damit wir später darauf verweisen und auch seine Breite und Höhe festlegen können.


Schritt 9: Erstellen Sie Main.js

Beginnen wir mit der Erstellung unseres Spiels!

Öffnen Sie Ihren bevorzugten JavaScript-Editor (jeder Texteditor funktioniert, aber Sie haben keine Syntaxhervorhebung) und bereiten Sie das Schreiben des Codes vor. Denken Sie daran, die Datei als Main.js in Ihrem Projektordner zu speichern.


Schritt 10: Leinwand definieren

Zunächst definieren wir alle grafischen und logischen Variablen.

Die nächsten Variablen repräsentieren das HTML-Canvas-Element und die Stufe, die damit verknüpft wird. Die stage Variable verhält sich ähnlich wie die AS3-Stufe.


Schritt 11: Hintergrund

Diese Variable speichert das Titelhintergrundbild.


Schritt 12: Titelansicht

Dies ist die Titelansicht, der erste interaktive Bildschirm, der in unserem Spiel angezeigt wird. Diese Variablen speichern ihre Komponenten.


Schritt 13: Credits

Diese Ansicht zeigt die Credits, das Jahr und das Copyright des Spiels. Diese Variablen werden zum Speichern verwendet.


Schritt 14: Spielansicht

Die nächsten Variablen speichern die einzelnen Grafiken, die in der Spielansicht angezeigt werden:


Schritt 15: Punktzahl

Die Bewertungswerte werden von den nächsten Variablen verarbeitet:


Schritt 16: Variablen

Dies sind die Variablen, die wir verwenden werden. Lesen Sie die Kommentare im Code, um zu verstehen, wofür sie bestimmt sind:


Schritt 17: Erstellen Sie Soundeffekte

Wir werden Soundeffekte verwenden, um das Spielgefühl zu verbessern. Die Sounds in diesem Beispiel wurden mit dem hervorragenden kostenlosen Werkzeug as3sfxr erstellt und mit Audacity in MP3 konvertiert.

Die erforderlichen Sounds finden Sie alle im Quellen-Download. Wenn Sie Ihre eigenen erstellen möchten, benötigen Sie vier:

  • hit.mp3: wird gespielt, wenn der Ball ein Paddel trifft
  • playerScore.mp3: wird gespielt, wenn der Spieler ein Tor erzielt
  • enemyScore.mp3: wird gespielt, wenn der Feind ein Tor erzielt
  • wall.mp3: wird gespielt, wenn der Ball die obere oder untere Grenze erreicht

Schritt 18: Hauptfunktion

Die Funktion Main() wird als erste ausgeführt, wenn die Webseite geladen wird, da im Attribut onload des HTML-Dokuments darauf verwiesen wird (siehe Schritt 7).

Es werden die notwendigen Funktionen aufgerufen, um das Spiel zu starten.


Schritt 19: Canvas verknüpfen

Dieser Code ruft die HTML-Canvas-ID ab und verknüpft sie mit der EaselJS Stage-Klasse. Dadurch verhält sich die Stage-Variable wie die Stage-Klasse in AS3. Fügen Sie dies zu Main() hinzu.


Schritt 20: Mausereignisse aktivieren

Mausereignisse sind in EaselJS standardmäßig deaktiviert, um die Leistung zu verbessern. Da wir diese im Spiel brauchen, fügen wir die folgende Zeile hinzu. Fügen Sie dies zu Main() hinzu.


Schritt 21: Sounds laden

Wir werden SoundJS verwenden, um unserem Spiel Sounds hinzuzufügen. Schreiben Sie den folgenden Code, um die Sounds zu importieren, die wir verwenden werden. Fügen Sie dies zu Main() hinzu.


Schritt 22: Laden Sie Grafiken

Dieser Code wird verwendet, um die Grafiken mithilfe einer Funktion vorzuladen, die wir später schreiben werden. Es setzt die zuvor erstellten Bildobjekte so, dass sie auf die relevanten Quell-PNG-Dateien in unserem Dokumentordner verweisen.

Jedem wird ein Name gegeben, damit wir erkennen können, welches Bild später geladen wird, und zuletzt wird die Funktion aufgerufen, die die geladenen Bilder verarbeitet.

Fügen Sie dies zu Main() hinzu.


Schritt 23: Ticker einstellen

Die Ticker-Klasse bietet eine zentralisierte Tick- oder Heartbeat-Übertragung in einem festgelegten Intervall. Dies kann verwendet werden, um die Spielschleife auszulösen.

Der folgende Code setzt die Bildrate auf 30 und definiert die Bühne als Listener für die Ticks.

Die TweenJS-Klasse hört sich dieses Häkchen an, um die Animationen auszuführen. Fügen Sie dies zu Main() hinzu.


Schritt 24: Vorladefunktion

Jedes Mal, wenn eine Grafik geladen wird, wird diese Funktion ausgeführt. Jedes Bild wird einem Bitmap-Objekt zugewiesen und überprüft, ob alle Elemente geladen sind, bevor Sie fortfahren.


Schritt 25: Titelansicht hinzufügen

Wenn alle Grafiken geladen sind, wird die Titelansicht durch die folgende Funktion zur Bühne hinzugefügt:


Schritt 26: Start-Taste Listener

Diese Funktion fügt den TitleView-Schaltflächen die erforderlichen Listener hinzu (sie ist Teil von addTitleView()):


Schritt 27: Credits anzeigen

Der Bildschirm "Credits" wird angezeigt, wenn der Benutzer auf die Schaltfläche "Credits" klickt. Dem vollständigen Bild wird ein Maus-Listener hinzugefügt, um es zu entfernen.


Schritt 28: Credits ausblenden

Wenn Sie auf den Bildschirm "Credits" klicken, wird dieser zurückgeschaltet und von der Bühne entfernt.

Lassen Sie uns hier anhalten, um zu testen, was wir bisher getan haben. Klicken Sie hier für eine Meilenstein-Demo.

Beachten Sie, dass einige Zeilen auskommentiert wurden, da einige Funktionen noch nicht erstellt wurden.

Denken Sie daran, dass der Meilenstein in den Quelldateien enthalten ist. Wenn Ihre Datei diese also aus irgendeinem Grund nicht nachahmt, vergleichen Sie Ihre Quelle mit meiner, um festzustellen, was dies verursachen könnte.


Schritt 29: Spielansicht anzeigen

In den folgenden Zeilen wird die TitleView von der Bühne entfernt und die GameView-Elemente zur Bühne hinzugefügt. Dem Hintergrund wird ein Maus-Listener hinzugefügt, um das Spiel zu starten, wenn Sie darauf klicken.


Schritt 30: Spielerbewegung

Der Spieler bewegt sich zusammen mit der vertikalen Position der Maus:


Schritt 31: Spiel starten

Dieser Code wird ausgeführt, wenn der Spieler auf den Spielhintergrund klickt. Er fügt den Maus-Listener hinzu, der die Funktion im vorherigen Schritt auslöst, und fügt einen Ticker hinzu, um die Spielschleife zu steuern.

Achten Sie auf die Art und Weise, wie der Ticker erstellt wird: Dies entspricht einem Timer-Ereignis in AS3.


Schritt 32: Zurücksetzen

Wenn ein Punkt erzielt wird (vom Spieler oder vom Computer), kehren die Paddel und der Ball in ihre ursprüngliche Position zurück und das Spiel wird unterbrochen:


Schritt 33: Ballbewegung

Wenn das Spiel nicht unterbrochen wird, wird der Ball in jedem Frame mit den zuvor erstellten Variablen bewegt.


Schritt 34: CPU-Bewegung

Dieser Code steuert die Bewegung des Computers. Das Paddel wird so bewegt, dass es dem Ball folgt und dennoch eine gewisse Fehlerquote aufweist.


Schritt 35: Wandkollisionen

Hier prüfen wir, ob sich der Ball am oberen oder unteren Rand der Leinwand befindet. In diesem Fall wird die vertikale Geschwindigkeit umgekehrt und ein Ton abgespielt.


Schritt 36: Ergebnisse

Nun die linke und rechte Seite. Dieser Code ändert auch die Punktzahl, ruft die Rücksetzfunktion auf und spielt je nach der Seite, auf der der Ball berührt wurde, einen anderen Klang.


Schritt 37: Ball-Paddel-Kollisionen

Der folgende Code überprüft, ob der Ball mit einem Paddel kollidiert, indem er die Position des Paddels mit den Koordinaten des Balls vergleicht. Wenn sich die Begrenzungsrahmen der beiden kreuzen, kommt es zu einer Kollision, sodass wir die x-Geschwindigkeit des Balls umkehren und einen Ton abspielen.


Schritt 38: Auf Win/Game Over prüfen

Sie können die Endbedingung in den nächsten Zeilen ändern - sie ist standardmäßig auf 10 Punkte festgelegt.


Schritt 39: Alarm

Diese Funktion stoppt das Spiel und zeigt eine Warnung an, deren Inhalt vom Spielergebnis abhängt.


Schritt 40: Testen

Speichern Sie Ihre Arbeit (falls nicht) und öffnen Sie die HTML-Datei im Browser, damit Ihr Spiel funktioniert!


Schlussfolgerung

Versuchen Sie, die Variablen des Spiels zu ändern, um Ihre eigene Version des Spiels zu erstellen!

Ich hoffe dir hat dieses Tutorial gefallen, danke fürs Lesen!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Game Development tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.