Advertisement
  1. Code
  2. Games

Lernen Sie CreateJS, indem Sie ein HTML5-Pong-Spiel erstellen

by
Read Time:13 minsLanguages:

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Das Web bewegt sich schnell - so schnell, dass unser ursprüngliches EaselJS-Tutorial bereits veraltet ist! In diesem Tutorial erfahren Sie, wie Sie die neueste CreateJS-Suite verwenden, indem Sie einen einfachen Pong-Klon erstellen.


Endergebnis Vorschau

Werfen wir einen Blick auf das Endergebnis, auf das wir hinarbeiten werden:

The PONG gameThe PONG gameThe PONG game

Anklicken um abzuspielen

Dieses Tutorial basiert auf Carlos Yanez Create a Pong-Spiel in HTML5 mit EaselJS, das wiederum auf seinem Handbuch Erste Schritte mit EaselJS basiert. Die Grafiken und Soundeffekte stammen alle aus dem vorherigen Tutorial.


Schritt 1: Erstellen Sie index.html

Dies wird unsere Hauptdatei index.html sein:

Wie Sie sehen, ist es ziemlich kurz und besteht hauptsächlich aus dem Laden der CreateJS-Bibliotheken.

Seit der Veröffentlichung von CreateJS (das im Grunde alle separaten EaselJS-Bibliotheken bündelt) müssen wir die JS-Dateien nicht mehr herunterladen und auf unserer Website hosten. Die Dateien werden jetzt in einem CDN (Content Delivery Network) abgelegt, mit dem wir diese Dateien so schnell wie möglich aus der Ferne laden können.

Überprüfen wir den Code:

Diese Zeile entfernt die mobile Hervorhebung, die möglicherweise angezeigt wird, wenn Sie versuchen, das Spiel auf dem Handy zu spielen. (Durch die mobile Hervorhebung wird das Canvas-Objekt hervorgehoben und Ihre Fingerbewegungen werden ignoriert.)

Als nächstes müssen ie CreateJS-Bibliotheken geladen werden:>

Dieser Code lädt die JS-Dateien vom CreateJS-CDN und ermöglicht es uns grundsätzlich, alle CreateJS-Funktionen in unserem Code zu verwenden

Als Nächstes laden wir das SoundJS Flash-Plugin, das Soundunterstützung für Browser bietet, die HTML5 Audio nicht unterstützen. Ihnen hilft SWF (eines Flash-Objekts) zum Laden der Sounds.

In diesem Fall verwenden wir das CDN nicht. Stattdessen laden wir die SoundJS-Bibliothek von http://createjs.com/#!/SoundJS/download herunter und platzieren die Dateien soundjs.flashplugin-0.2.0.min.js und FlashAudioPlugin.swf in einem lokalen Ordner mit dem Namen assets.

Als letzte der JS-Dateien laden wir die Datei Main.js, die den gesamten Code für unser Spiel enthält:

Zum Schluss platzieren wir ein Canvas-Objekt auf unserer Bühne.

Jetzt können wir mit der Arbeit am Spielcode beginnen.


Schritt 2: Die Variablen

Unser Spielcode befindet sich in einer Datei namens Main.js. Erstellen und speichern Sie diese jetzt.

Definieren wir Variablen für alle Grafikobjekte im Spiel:

Ich habe für jede Variable einen Kommentar hinzugefügt, damit Sie wissen, was wir in diese Variable laden

Weiter bekommen Sie nächste:

Wir benötigen Variablen für die Geschwindigkeit des Balls:

Sie können diese Werte beliebig ändern, wenn Sie das Spiel einfacher oder schwieriger machen möchten.

Wenn Sie ein Flash-Entwickler sind, wissen Sie, dass der onEnterFrame von Flash beim Erstellen von Spielen sehr nützlich ist, da in jedem Frame Dinge passieren müssen. (Wenn Sie mit dieser Idee nicht vertraut sind, lesen Sie diesen Artikel in der Game Loop.)

Wir haben ein Äquivalent für onEnterFrame in CreateJS, und das ist das ticker-Objekt, das Code im Bruchteil einer Sekunde ausführen kann. Erstellen wir die Variable, die mit ihr verknüpft wird:

Danach haben wir den Preloader, der die neuen PreloadJS-Methoden verwenden wird.

  • preloader - enthält das PreloadJS-Objekt.
  • manifest - enthält die Liste der Dateien, die geladen werden müssen.
  • totalLoaded - Diese Variable enthält die Anzahl der bereits geladenen Dateien.

Last but not least haben wir in unserer Liste der Variablen TitleView, das mehrere Grafiken enthält, um sie zusammen anzuzeigen (wie ein Flash DisplayObjectContainer).

Fahren wir mit der Hauptfunktion fort...


Schritt 3: Die Main() Funktion

Diese Funktion ist die erste Funktion, die ausgeführt wird, nachdem alle JS-Dateien aus der index.html geladen wurden. Aber wie heißt diese Funktion?

Erinnern Sie sich an diese Zeile aus der Datei index.html?

Dieses Codefragment besagt, dass nach dem Laden des HTML (und der JS-Bibliotheken) die Main funktion ausgeführt werden sollte.

Lassen Sie es uns überprüfen:

Lassen Sie uns jeden Teil aufschlüsseln:

Hier verknüpfen wir das PongStage Canvas-Objekt aus der Datei index.html mit der Canvas-Variablen und erstellen dann ein Stage-Objekt aus diesem Canvas. (Auf der Bühne können wir Objekte darauf platzieren.)

Mit mouseEventsEnabled können wir Mausereignisse verwenden, um Mausbewegunge und -klicks zu erkennen.

Hier konfigurieren wir, wo sich das Flash-Sound-Plugin für die Browser befindet, in denen HTML5 Audio nicht unterstützt wird

In der Manifestvariablen platzieren wir ein Array von Dateien, die wir laden möchten (und geben für jede eine eindeutige ID an). Jeder Sound hat zwei Formate - MP3 und OGG - da verschiedene Browser mit verschiedenen Formaten (in) kompatibel sind.

Hier konfigurieren wir das Preloader-Objekt mit PreloadJS. PreloadJS ist eine neue Ergänzung zu den CreateJS-Bibliotheken und eine recht nützliche.

Wir erstellen ein neues PreloadJS-Objekt, platzieren es in der preloader-Variablen und weisen dann jedem Ereignis eine Methode zu (onProgress, onComplete, onFileLoad). Schließlich verwenden wir den preloader, um das zuvor erstellte Manifest zu laden.

Hier fügen wir das Ticker-Objekt zur Bühne hinzu und stellen die Bildrate auf 30 FPS ein. Wir werden es später im Spiel für die enterFrame-Funktionalität verwenden.


Schritt 4: Erstellen der Preloader-Funktionen

Sehen wir uns die Funktionen an:

  • handleProgress - In dieser Funktion können Sie den Prozentsatz des Ladevorgangs mithilfe des folgenden Parameters verfolgen: event.loaded. Damit können Sie beispielsweise einen Fortschrittsbalken erstellen.
  • handleComplete - Diese Funktion wird aufgerufen, sobald alle Dateien geladen wurden (falls Sie dort etwas platzieren möchten).
  • handleFileLoad - Da wir zwei Arten von Dateien laden - Bilder und Töne - haben wir diese Funktion, die jede einzeln behandelt. Wenn es sich um ein Bild handelt, erstellen wir ein Bitmap-Bild, platzieren es in einer Variablen (deren Name mit der ID des geladenen Bildes übereinstimmt) und rufen dann die Funktion handleLoadComplete auf (die wir als Nächstes schreiben). Wenn es sich um einen Sound handelt, rufen wir sofort handleLoadComplete auf.

Lassen Sie uns nun die soeben erwähnte handleLoadComplete-Funktion diskutieren:

Es ist eine ziemlich einfache Funktion. Wir erhöhen die Variable totalLoaded (die die Anzahl der bisher geladenen Assets enthält) und prüfen dann, ob die Anzahl der Elemente in unserem Manifest mit der Anzahl der geladenen Assets übereinstimmt. In diesem Fall wechseln wir zum Hauptmenü.


Schritt 5: Erstellen des Hauptmenüs

The Main MenuThe Main MenuThe Main Menu

Hier ist nichts Besonderes. Wir platzieren die Bilder der Hintergrund-, Start- und Credits-Schaltfläche auf der Bühne und verknüpfen die onPress-Ereignishandler mit den Start- und Credits-Schaltflächen.

Hier sind die Funktionen, mit denen der Credits-Bildschirm und das tweenTitleView, mit dem das Spiel gestartet wird, angezeigt und entfernt werden:


Schritt 6: Der Spielcode

The PONG gameThe PONG gameThe PONG game

Wir haben den Hauptteil dieses Tutorials erreicht, nämlich den Code des Spiels.

Zunächst müssen wir der Bühne alle erforderlichen Assets hinzufügen, also tun wir dies in der Funktion addGameView:

Wieder eine ziemlich einfache Funktion, die die Objekte auf dem Bildschirm platziert und dem Hintergrundbild ein mouseEvent hinzufügt, so dass das Spiel startet, wenn der Benutzer darauf klickt (wir rufen die Funktion startGame auf).

Sehen wir uns die startGame-Funktion an:

Hier, wie Sie sehen können, zusätzlich zum Hinzufügen eines onMouseMove-Ereignisses, das unser Paddel bewegt. Wir fügen das tick-Ereignis hinzu, das die update funktion in jedem Frame aufruft.

Sehen wir uns die Funktionen movePaddle und reset an:

In movePaddle platzieren wir das Paddel des Benutzers grundsätzlich an der y-Koordinate der Maus.

Beim reset machen wir etwas Ähnliches wie addGameView, außer dass wir hier keine grafischen Elemente hinzufügen, da sie bereits auf dem Bildschirm angezeigt werden.

Mit der alert funktion zeigen wir das Gewinn- und Verlust-Popup an:


Schritt 7: Die Spielschleife

Im letzten Teil unseres Tutorials arbeiten wir nun an der update-Funktion (die in jedem Frame des Spiels auftritt - ähnlich wie bei Flashs onEnterFrame):

Sieht beängstigend aus, oder? Keine Sorge, wir werden jeden Teil überprüfen und darüber diskutieren.

In jedem Frame bewegt sich der Ball gemäß seinen x- und y-Geschwindigkeitswerten

Hier haben wir die grundlegende KI des Computers, bei der das Paddel des Computers einfach dem Ball ohne spezielle Logik folgt. Wir vergleichen einfach die Position der Mitte des Paddels (weshalb wir dem CPU-Y-Wert 32 Pixel hinzufügen) mit der Position des Balls mit einem kleinen Versatz und bewegen das Paddel nach Bedarf nach oben oder unten.

Wenn der Ball den oberen oder unteren Rand des Bildschirms trifft, ändert der Ball die Richtung und wir spielen den Wall Hit-Sound.

Das Anmelden der Punktzahl ist einfach: Wenn der Ball den linken oder rechten Rand überschreitet, erhöht er die Punktzahl des Spielers bzw. der CPU, spielt einen Ton ab und setzt die Position der Objekte mithilfe der zuvor beschriebenen reset funktion zurück.

Hier beschäftigen wir uns mit Kollisionen des Balls mit den Paddeln; Jedes Mal, wenn der Ball auf eines der Paddel trifft, ändert der Ball die Richtung und es wird ein Ton gespielt

Wenn das Paddel des Spielers außerhalb der Grenzen liegt, platzieren wir es wieder innerhalb der Grenzen.

In diesem Snippet prüfen wir, ob einer der Punkte des Spielers 10 Punkte erreicht hat, und wenn ja, zeigen wir dem Spieler das Popup mit Gewinn oder Verlust an (entsprechend seinem Gewinnstatus).


Abschluss

Sie haben mit CreateJS ein ganzes Pong-Spiel erstellt. Vielen Dank, dass Sie sich die Zeit genommen haben, dieses Tutorial zu lesen.

Advertisement
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.