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

Erstellung eines einfaches Space-Shooter-Spiel in HTML5 mit EaselJS

Scroll to top
Read Time: 13 mins
This post is part of a series called Shoot-'Em-Up.
An Introduction to FlashPunk: Creating a Spaceship Shoot-'Em-Up
Build a Stage3D Shoot-'Em-Up: Sprite Test

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

Letztes Jahr habe ich Ihnen gezeigt, wie man mit Flash und AS3 ein Shoot-Em-Up-Spiel erstellt. Angesichts der zunehmenden Beliebtheit (und Funktionen) von HTML5 werfen wir einen Blick darauf, wie Sie dasselbe mit HTML5, JavaScript und EaselJS tun können.


Vorschau des endgültigen Bildes

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

Klicken Sie hier, um die Demo abzuspielen.


Schritt 1: Kurze Übersicht

Mit vorgefertigten Sprites werden wir ein unterhaltsames Space Shooter-Spiel in HTML5 mithilfe der EaselJS-Bibliothek codieren.

Der Spieler kann ein Raumschiff steuern und mehrere Feinde erschießen, während er im Weltraum unterwegs ist.


Schritt 2: Interface

Es wird eine einfache und futuristische Oberfläche verwendet, die Bitmaps und mehr umfasst. Ich habe in der Demo dieses Tutorials eine großartige Sprite-Bibliothek verwendet. Diese sind Teil der kostenlosen Sinistar Clone Graphics.

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


Schritt 3: Bekommen Sie EaselJS

Die EaselJS-Bibliothek wird zum Erstellen unseres Spiels verwendet. Lesen Sie unbedingt das Tutorial Erste Schritte, 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. Speichern Sie dies als Shooter.html.


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 dies würde das mobile Erlebnis drastisch abnehmen.


Schritt 6: JavaScript-Bibliotheken

Der folgende Code fügt die erforderlichen JavaScript-Bibliotheken hinzu, die für die Funktion unserer App erforderlich sind.

Main.js ist die Datei, in der wir alle unsere eigenen Funktionen für das Spiel speichern. Erstellen Sie es jetzt und speichern Sie es im selben Ordner wie Shooter.html. Sie müssen auch die aufgelisteten EaselJS-Bibliotheken herunterladen.


Schritt 7: Hauptfunktion aufrufen

In den nächsten Zeilen nennen wir unsere Hauptfunktion; Dies ist die Funktion, mit der unsere Anwendung gestartet wird. Sie wird später in unserem JavaScript-Code erstellt.


Schritt 8: Leinwandelement

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: Starten des JavaScript

Beginnen wir mit der Erstellung unseres Spiels!

Öffnen Sie Ihren bevorzugten JavaScript-Editor (jeder Texteditor funktioniert, aber Sie haben keine Syntaxhervorhebung) und bereiten Sie sich darauf vor, Ihr fantastisches Spiel zu schreiben. Öffnen Sie die zuvor erstellte Datei Main.js.


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 Stage in einem AS3 Flash-Projekt.)


Schritt 11: Hintergrund

Die nächsten Variablen speichern die Hintergrundbilder. Zwei gekachelte Bilder werden verwendet, um einen unendlich scrollenden Hintergrund zu erstellen.


Schritt 12: Versenden

Dies ist das Schiff, das als Spielercharakter oder Held verwendet wird.


Schritt 13: Feind

Mehrere Feinde werden auf der Bühne sein; Sie werden dies als Quellgrafik verwenden.


Schritt 14: Boss

Ein Boss wird im Spiel anwesend sein, größer und mit mehr Gesundheit als die anderen Feinde. Diese Variablen werden verwendet, um es zu instanziieren.


Schritt 15: Leben

Das "Leben"-Icon. Zu Beginn werden drei Leben gegeben, und Sie verlieren eines, wenn Sie von einem Feind getroffen werden.


Schritt 16: Kugeln

Dies ist Ihre Waffe: Feuern Sie Kugeln auf die Feinde ab, um sie zu töten. Diese Variable speichert das Quellbild.


Schritt 17: Warnungsgrafiken

Im Spiel werden zwei Warnungen verwendet, eine für den Fall, dass Sie gewinnen, und eine für den Fall, dass Sie verlieren. Wir werden später in diesem Tutorial sehen, wie Sie einen Gewinn oder eine Niederlage feststellen können.


Schritt 16: Variablen

Dies sind die Variablen, die wir verwenden werden. Lesen Sie die Kommentare im Code, um mehr darüber zu erfahren. Einige ihrer Namen sind selbsterklärend und haben daher keine Kommentare.


Schritt 17: Sounds

Wir werden Soundeffekte verwenden, um das Spielgefühl zu verbessern. Sie finden die in diesem Beispiel verwendeten Sounds auf Soungle.com mit den Schlüsselwörtern space, Explosion und Laser.


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 ruft die notwendigen Funktionen auf, um das Spiel zu starten. Wir werden diese Funktionen in den nächsten Schritten erstellen - alles von Schritt 19 bis Schritt 23 sollte in diese Funktion gehören.


Schritt 19: Canvas verlinken

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 20: Mausereignisse aktivieren

Mausereignisse sind in EaselJS standardmäßig deaktiviert, um die Leistung zu verbessern. Wenn wir diese im Spiel brauchen, fügen wir die folgende Zeile hinzu.


Schritt 21: Sounds laden

Wir werden SoundJS verwenden, um unserem Spiel Sounds hinzuzufügen. Die addBatch-Methode von SoundJS verwendet für jeden Aufruf ein Array mit drei Parametern:

  • name: Der Instanzname, den der Sound haben soll - dieser wird verwendet, um den Sound später abzuspielen.
  • src: Die URL der Audiodatei.
  • instances: Die Anzahl der Instanzen, die gleichzeitig abgespielt werden können.

Schritt 22: Laden Sie Grafiken

Dieser Code wird verwendet, um die Grafiken mithilfe einer Funktion vorzuladen, die wir später schreiben werden. Es zeigt jedes zuvor erstellte Bildobjekt auf die Quell-PNG-Datei 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 verarbeitet.


Schritt 23: Ticker einstellen

Die Ticker-Klasse bietet ein zentrales "tick", das in einem festgelegten Intervall gesendet wird. Wir können die Funktion tick() verwenden, um bestimmten Code regelmäßig auszuführen.

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 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 addGameView aufgerufen wird.


Schritt 25: Spielansicht hinzufügen

Wenn alle Grafiken geladen sind, wird die Funktion addGameView aufgerufen. Diese Funktion fügt der Bühne das Schiff, den Lebenszähler, die Punktzahl und die Hintergründe hinzu.


Schritt 26: Schiff bewegen

Das Schiff des Spielers wird mausgesteuert und wir verwenden diese Funktion, um Folgendes zu handhaben:

e.stageX bezieht sich auf die x-Koordinate der Maus, und diese Funktion wird aufgerufen, wenn sich die Maus bewegt.


Schritt 27: Shoot

Unser Schiff wird in der Lage sein, Kugeln abzuschießen, um sich selbst zu zerstören und vor Feinden zu schützen. Diese Funktion wird jedes Mal ausgeführt, wenn der Benutzer auf die Bühne klickt, und platziert eine Kugel vor dem Schiff, die später von der Funktion update() verschoben wird. Es wird auch ein Schießgeräusch abgespielt.


Schritt 28: Feindfunktion hinzufügen

Es wäre kein Schütze ohne etwas zu schießen. Hier wird mit setInterval() alle 1000 Millisekunden ein Feind erstellt (diesen Wert können Sie im nächsten Schritt ändern), der später von der Funktion update() verschoben wird.


Schritt 29: Spiel starten

Diese Zeilen fügen der Bühne und dem Timer die erforderlichen Zuhörer hinzu. Dies umfasst Mausereignisse, zeitgesteuerte Ereignisse (über setInterval) und Ticker-Ereignisse, die das Spiel in jedem Frame aktualisieren.


Schritt 30: Hintergrund verschieben

Der Hintergrund wird in jedem Frame verschoben, um die Raumfahrt zu simulieren. Wenn das untere Hintergrund-Sprite die Stufengrenze erreicht, wird es wieder nach oben verschoben, wodurch eine Endlosschleife entsteht.


Schritt 31: Kugeln verschieben

In den nächsten Codezeilen wird geprüft, ob sich Aufzählungszeichen in der Phase befinden. In diesem Fall werden die Kugeln nach oben bewegt.


Schritt 32: Entfernen Sie Offstage Bullets

Fügen wir einige Linien hinzu, um die Position des Geschosses zu ermitteln, und verwenden Sie diese, um ein Geschoss zu zerstören, wenn es nicht mehr sichtbar ist.


Schritt 33: Zeigen Sie Boss

Wir werden dem Spiel einen großen schlechten Boss hinzufügen. Wenn der Benutzer eine bestimmte Punktzahl erreicht, erscheint der Chef:


Schritt 34: Gegner bewegen

Die Feinde werden ebenso wie die Kugeln in jedem Bild bewegt. Dieser Code findet alle Feinde auf der Bühne mithilfe des enemies containers und bewegt sie jeweils 5 Pixel nach unten.


Schritt 35: Entfernen Sie Gegner außerhalb der Bühne

Wir überprüfen auch die Positionen der Feinde, um sie zu zerstören, wenn sie nicht mehr sichtbar sind.


Schritt 36: Bullet - Enemy Collision

Die Kugeln im Container werden auf Kollision mit den Feinden getestet; In diesem Fall werden beide von der Bühne entfernt, ein Ton abgespielt und die Partitur aktualisiert.


Schritt 37: Bullet-Boss-Kollision

Der folgende Code behandelt die Bosskollisionen. Er verwendet dieselbe Methode wie die Kollisionsschleife zwischen Kugel und Feind. Hier verwenden wir die Variable bossHealth, um zu bestimmen, wann der Boss besiegt wird.


Schritt 38: Schiff - Feindliche Kollision

Hier prüfen wir, ob ein Feind mit dem Schiff des Spielers kollidiert. Wenn dies der Fall ist, wird ein Ton abgespielt, ein Leben entfernt und das Schiff animiert.


Schritt 39: Überprüfen Sie auf Gewinn oder Verlust

Der Spieler gewinnt, wenn der Boss seine ganze Gesundheit verliert und verliert, wenn sein ganzes Leben verloren geht. Die nächsten Zeilen erkennen diese Situationen und rufen eine Warnfunktion mit dem richtigen Parameter auf.


Schritt 40: Alarm

Der Alarm zeigt dem Spieler Informationen über den Status des Spiels an. Es wird angezeigt, wenn ein Spielereignis erreicht ist. Es entfernt die Spielelisten und zeigt die entsprechende Nachricht an.


Schritt 41: Testen



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


Abschluss

Sie haben gelernt, wie Sie ein Space Shooter-Spiel mit all seinen Grundfunktionen erstellen. Versuchen Sie, es mit dem zu erweitern, was Sie bereits wissen. Ein guter Anfang wäre, die Feinde oder den Boss auf den Spieler zurückschießen zu lassen.

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.