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 Sie mit EaselJS ein Whack-a-Mole-Spiel in HTML5

Scroll to top
Read Time: 10 mins

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

Vor einigen Wochen habe ich Ihnen gezeigt, wie Sie mit Flash und AS3 ein Whack-a-Mole-Spiel (also Whack-a-Worm) erstellen. Nach meiner Einführung in EaselJS werden wir nun sehen, wie diese Bibliothek verwendet wird, um dasselbe Spiel mit der HTML5-Zeichenfläche und JavaScript zu erstellen.


Schritt 1: Kurze Übersicht

Mit vorgefertigten Grafiken werden wir das unterhaltsame Spiel Whack A Mole, ähnlich dem HTML5-Spiel, mithilfe der EaselJS-Bibliothek codieren.

Der Spieler kann auf die Würmer auf dem Bildschirm klicken und Punkte erhalten.


Schritt 2: Interface

Wir werden eine einfache und benutzerfreundliche Oberfläche verwenden, die mehrere Formen, Schaltflächen, Bitmaps und mehr hat. Verwendete Wurmgrafik werden wir von hier unter einer Creative Commons-Lizenz herunterladen.

Sie finden für dieses Tutorial erforderlichen grafischen Ressourcen für die Benutzeroberfläche im angehängten Download.


Schritt 3: Holen Sie sich EaselJS

Die EaselJS-Bibliothek wird zum Erstellen unseres Spiels verwendet. Lesen Sie unbedingt das Tutorial der Ersten Schritten, wenn Sie neu in dieser Bibliothek sind.

Sie können EaselJS von der offiziellen Website herunterladen.


Schritt 4: HTML-Struktur

Lassen Sie uns unser HTML-Dokument vorbereiten. Es ist eine einfache HTML-Struktur, um mit dem Schreiben unserer App zu beginnen.


Schritt 5: Mobile Hightlight ausblenden

Fügen wir auch ein wenig CSS hinzu. In dieser Zeile wird die Standardhervorhebung entfernt, wenn Sie mit einem mobilen Browser auf ein Element tippen. Ohne das 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.


Schritt 7: Hauptfunktion aufrufen

In den nächsten Zeilen rufen wir unseren Konstruktor auf. Dies ist die Hauptfunktion, die später in unserem JavaScript-Code erstellt wird.


Schritt 8: Canvas Tag

Die Leinwand wird in dieser Zeile hinzugefügt. Wir weisen eine ID zu, um später darauf zu verweisen, und legen auch deren Breite und Höhe fest.


Schritt 9: JavaScript

Beginnen wir mit der App-Erstellung!

Öffnen Sie Ihren bevorzugten JavaScript-Editor (jeder Texteditor funktioniert, aber Sie haben keine Syntaxhervorhebung) und bereiten Sie sich darauf vor, Ihre fantastische App zu schreiben. Denken Sie daran, die Datei mit der Erweiterung .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 Bühne, die damit verknüpft wird. Die Stufenvariable verhält sich ähnlich wie die AS3-Stufe.


Schritt 11: Hintergrund

Diese Variable speichert das Titelhintergrundbild. (Sie können das obige Bild herunterladen oder es aus der ZIP-Quelldatei des Tutorials herunterladen.)


Schritt 12: Titelansicht

Das ist die Titelansicht, die als erster interaktiver Bildschirm in unserem Spiel angezeigt wird. Diese Variablen speichern ihre Komponenten:


Schritt 13: Credits

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


Schritt 14: Hintergrund der Spielansicht

Der Hintergrund für die Spielansicht.


Schritt 15: Alarm

Eine Warnung wird angezeigt, wenn alle Würmer aufgetaucht sind, und zeigt das Endergebnis an, das der Spieler erreicht hat.


Schritt 16: Punktzahl

Der Bewertungswert wird von der nächsten Variablen verarbeitet.


Schritt 17: Würmer

Die folgenden Variablen werden verwendet, um die Grafiken der Würmer zu speichern und auf den letzten sichtbaren Wurm zu verweisen.


Schritt 18: Positionieren Sie Arrays

Arrays werden verwendet, um die Endposition der Würmer zu speichern. Dies wird verwendet, um den Wurm beim Ausführen der Pop-out-Animation an die richtige Lochposition zu bringen.


Schritt 19: Zusätzliche Variablen

Dies sind die anderen Variablen, die wir verwenden werden. Lesen Sie die Kommentare im Code, um mehr darüber zu erfahren. (Einige sind selbsterklärend.)


Schritt 20: Main() Funktion

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 ruft die notwendigen Funktionen auf, um das Spiel zu starten. Überprüfen Sie diese Funktionen in den nächsten Schritten.


Schritt 21: 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.


Schritt 22: 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.


Schritt 23: Grafik laden

Dieser Code wird verwendet, um die Grafiken mithilfe einer Funktion vorzuladen, die wir später schreiben werden. Es setzt das zuvor erstellte Image-Objekt auf die PNG-Quelldatei in unserem Dokumentordner. Es wird ein Name vergeben, um zu erkennen, welches Bild geladen wird, und zuletzt wird die Funktion aufgerufen, die die geladenen Bilder enthält.


Schritt 24: Ticker einstellen

Das Ticker-Objekt bietet einen zentralen Tick oder Heartbeat, der in einem festgelegten Intervall über den Rückruf von tick() gesendet wird.
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.


Schritt 25: Vorladefunktion

Jedes Mal, wenn eine Grafik geladen wird, wird diese Funktion ausgeführt. Es ordnet jedes Bild einem Bitmap-Objekt zu und prüft, ob alle Elemente geladen sind, bevor Sie fortfahren. Wie Sie sehen, werden einer Bitmap nur fünf Bilder zugewiesen, aber die Variable gfxLoaded wartet, bis sieben Elemente geladen sind. Auf diese Weise wird darauf gewartet, dass die CreditsView- und Worms-Grafik im Speicher gespeichert wird.


Schritt 26: Spielansicht hinzufügen

Wenn alle Grafiken geladen sind, wird der Spielhintergrund zur Bühne hinzugefügt. Dieser wird später in der Titelansicht behandelt. Dies soll etwas dahinter zeigen, wenn diese Ansicht zwischengeschaltet und entfernt wird.


Schritt 27: Titelansicht

Jetzt platzieren wir die TitleView in der Bühne und rufen eine Funktion auf, die die Maus-Listener zu den Schaltflächen hinzufügt.


Schritt 28: Starten Sie die Button Listener

Diese Funktion fügt den TitleView-Schaltflächen die erforderlichen Listener hinzu.


Schritt 29: 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 30: Credits ausblenden

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


Meilenstein

Lassen Sie uns hier anhalten, um einen kurzen Test durchzuführen und sicherzustellen, dass unser Spielcode funktioniert.

Schauen Sie sich hier den Meilenstein an.

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

Denken Sie daran, dass die Meilensteine in den Quelldateien enthalten sind. Wenn Ihre Datei diese also aus irgendeinem Grund nicht nachahmt, sehen Sie sich die Quelle an, um festzustellen, was dies verursachen könnte.


Schritt 31: Spielansicht anzeigen

Die folgenden Zeilen entfernen den Titel Bildschirm und lassen den Spielbildschirm sichtbar. Es wird auch eine Funktion aufgerufen, die den ersten Wurm anzeigt.


Schritt 32: Partiturtext

Dieser Code erstellt das Textobjekt, das die Partitur anzeigt.


Schritt 33: Überprüfen Sie, ob das Spiel beendet ist

Dieser Code prüft, ob die angezeigten Würmer das Limit überschritten haben, und ruft eine Warnung auf, wenn dies der Alert ist.


Schritt 34: Entfernen Sie den letzten Wurm

Dieser Code prüft, ob ein Wurm hinzugefügt wurde, und entfernt ihn gegebenenfalls.


Schritt 35: Zufälligen Wurm berechnen

Die nächste Zeile berechnet eine Zufallszahl, die im positionsarray verwendet wird, um einen Wurm in ein zufälliges Loch zu platzieren.


Schritt 36: Den Wurm hinzufügen

Jetzt erschaffen wir den Wurm und platzieren ihn; ein Maus-Listener wird hinzugefügt, um die Player-Klicks zu verarbeiten.


Schritt 37: Animation

Eine kleine Animation wird angezeigt, wenn der Wurm herauskommt: ein kleines Tween zu seiner Eigenschaft scaleY. Wenn die Animation beendet ist, erhöht sich die Variable currentWorms und die Funktion showWorm() wird erneut aufgerufen. Dadurch wird eine Schleife erstellt, die endet, sobald die Variable currentWorms den Wert von totalWorms erreicht.


Schritt 38: Wurm treffen

Diese Funktion behandelt das Klicken eines Wurms. Es erhöht im Grunde die Punktzahl und zerstört den angeklickten Wurm.


Schritt 39: Warnung anzeigen

Diese Funktion stoppt das Spiel und zeigt das Endergebnis an, wobei der Alarmhintergrund angezeigt und zwischengeschaltet wird.


Schritt 40: Testen

Speichern Sie Ihre Arbeit (falls nicht) und öffnen Sie die HTML-Datei im Browser, um zu sehen, wir Ihr HTML5-Spiel funktioniert!


Abschluss

Wie Sie sehen können, können viele der Spielvariablen/-parameter geändert und an Ihre Bedürfnisse angepasst werden. Versuchen Sie also, Ihre eigene Version des Spiels zu erstellen!

Ich hoffe Ihnen hat dieses Tutorial gefallen, danke für das 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.