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

() translation by (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 können.

Vorschau des endgültigen Bildes

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

Klicken Sie hier, um die Demo abzuspielen.

Schritt 1: Kurze Ü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, während er im Weltraum unterwegs ist.

Schritt 2: Interface

Es wird eine einfache und futuristische Oberflä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 für dieses Tutorial erforderlichen Schnittstellenressourcen finden Sie im angehä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 kö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.

 
<!DOCTYPE html> 
<html> 
	<head> 
		<title>Shooter</title> 
	</head> 
	<body> 
	</body> 
</html>

Schritt 5: Mobile Hightlight ausblenden

Fü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 würde das mobile Erlebnis drastisch abnehmen.

 
<!DOCTYPE html> 
<html> 
	<head> 
		<title>Shooter</title> 
		 
		<style>*{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}</style> 
	 
	</head> 
	<body> 
	</body> 
</html>

Schritt 6: JavaScript-Bibliotheken

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

 
<!DOCTYPE html> 
<html> 
	<head> 
		<title>Shooter</title> 
		 
		<style>*{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}</style> 
 
		<script src="easel.js"></script> 
		<script src="Tween.js"></script> 
		<script src="sound.js"></script> 
		<script src="Main.js"></script> 
	</head> 
	<body> 
	</body> 
</html>

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

Schritt 7: Hauptfunktion aufrufen

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

 
<!DOCTYPE html> 
<html> 
	<head> 
		<title>Shooter</title> 
		 
		<style>*{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}</style> 
 
		<script src="easel.js"></script> 
		<script src="Tween.js"></script> 
		<script src="sound.js"></script> 
		<script src="Main.js"></script> 
 
	</head> 
	<body onload="Main();"> 
	</body> 
</html>

Schritt 8: Leinwandelement

Die Leinwand wird in dieser Zeile hinzugefügt. Wir weisen eine ID zu, um später darauf zu verweisen, und legen auch deren Breite und Höhe fest.

 
<!DOCTYPE html> 
<html> 
	<head> 
		<title>Shooter</title> 
		 
		<style>*{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}</style> 
 
		<script src="easel.js"></script> 
		<script src="Tween.js"></script> 
		<script src="sound.js"></script> 
		<script src="Main.js"></script> 
 
	</head> 
	<body onload="Main();"> 
		<canvas id="Shooter" width="320" height="480"></canvas> 
	</body> 
</html>

Schritt 9: Starten des JavaScript

Beginnen wir mit der Erstellung unseres Spiels!

Ö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. Öffnen Sie die zuvor erstellte Datei Main.js.

Schritt 10: Leinwand definieren

Zunächst definieren wir alle grafischen und logischen Variablen.

Die nächsten Variablen repräsentieren das HTML-Canvas-Element und die Stufe, die damit verknüpft wird. (Die stage-Variable verhält sich ähnlich wie die Stage in einem AS3 Flash-Projekt.)

 
/* Define Canvas */ 
 
var canvas; 
var stage;

Schritt 11: Hintergrund

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

 
/* Background */ 
 
var bgImg = new Image(); 
var bg; 
var bg2Img = new Image(); 
var bg2;

Schritt 12: Versenden

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

 
/* Ship */ 
 
var sImg = new Image(); 
var ship;

Schritt 13: Feind

Mehrere Feinde werden auf der Bühne sein; Sie werden dies als Quellgrafik verwenden.

1
2	/* Enemy */
3
4	var eImg = new Image();

Schritt 14: Boss

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

 
/* Boss */ 
 
var bImg = new Image(); 
var boss;

Schritt 15: Leben

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

1
2	/* Lives */
3
4	var lImg = new Image();

Schritt 16: Kugeln

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

1
2	/* Bullets */
3
4	var bltImg = new Image();

Schritt 17: Warnungsgrafiken

Im Spiel werden zwei Warnungen verwendet, eine für den Fall, dass Sie gewinnen, und eine für den Fall, dass Sie verlieren. Wir werden später in diesem Tutorial sehen, wie Sie einen Gewinn oder eine Niederlage feststellen können.

 
/* Alert */ 
 
var winImg = new Image(); 
var loseImg = new Image(); 
var win; 
var lose;

Schritt 16: Variablen

Dies sind die Variablen, die wir verwenden werden. Lesen Sie die Kommentare im Code, um mehr darüber zu erfahren. Einige ihrer Namen sind selbsterklärend und haben daher keine Kommentare.

 
var lives = new Container(); //stores the lives gfx 
var bullets = new Container(); //stores the bullets gfx 
var enemies = new Container(); //stores the enemies gfx 
var bossHealth = 20; 
var score; 
var gfxLoaded = 0; //used as a preloader, counts the already loaded items 
var centerX = 160; 
var centerY = 240; 
var tkr = new Object(); //used as a Ticker listener 
var timerSource; //references a setInterval method

Schritt 17: Sounds

Wir werden Soundeffekte verwenden, um das Spielgefühl zu verbessern. Sie finden die in diesem Beispiel verwendeten Sounds auf Soungle.com mit den Schlüsselwörtern space, Explosion und Laser.

Schritt 18: Hauptfunktion

Die Funktion Main() wird als erste ausgefü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 nächsten Schritten erstellen - alles von Schritt 19 bis Schritt 23 sollte in diese Funktion gehören.

 
function Main() 
{ 
	//code... 
}

Schritt 19: Canvas verlinken

Dieser Code ruft die HTML-Canvas-ID ab und verknüpft sie mit der EaselJS Stage-Klasse. Dadurch verhält sich die Stage-Variable wie die Stage-Klasse in AS3.

 
/* Link Canvas */ 
	 
canvas = document.getElementById('Shooter'); 
stage = new Stage(canvas);

Schritt 20: Mausereignisse aktivieren

Mausereignisse sind in EaselJS standardmäßig deaktiviert, um die Leistung zu verbessern. Wenn wir diese im Spiel brauchen, fügen wir die folgende Zeile hinzu.

1
2	stage.mouseEventsEnabled = true;

Schritt 21: Sounds laden

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

name: Der Instanzname, den der Sound haben soll - dieser wird verwendet, um den Sound später abzuspielen.
src: Die URL der Audiodatei.
instances: Die Anzahl der Instanzen, die gleichzeitig abgespielt werden können.

 
/* Sound */ 
 
SoundJS.addBatch([ 
		{name:'boss', src:'boss.mp3', instances:1}, 
		{name:'explo', src:'explo.mp3', instances:10}, 
		{name:'shot', src:'shot.mp3', instances:10}]);

Schritt 22: Laden Sie Grafiken

Dieser Code wird verwendet, um die Grafiken mithilfe einer Funktion vorzuladen, die wir spä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.

 
/* Load GFX */ 
 
bgImg.src = 'bg.png'; 
bgImg.name = 'bg'; 
bgImg.onload = loadGfx; 
 	 
bg2Img.src = 'bg2.png'; 
bg2Img.name = 'bg2'; 
bg2Img.onload = loadGfx; 
 	 
sImg.src = 'ship.png'; 
sImg.name = 'ship'; 
sImg.onload = loadGfx; 
 
eImg.src = 'enemy1.png'; 
eImg.name = 'enemy'; 
eImg.onload = loadGfx; 
 
bImg.src = 'boss.png'; 
bImg.name = 'boss'; 
bImg.onload = loadGfx; 
 
lImg.src = 'live.png'; 
lImg.name = 'live'; 
lImg.onload = loadGfx; 
 
bltImg.src = 'bullet.png'; 
bltImg.name = 'bullet'; 
bltImg.onload = loadGfx; 
 
winImg.src = 'win.png'; 
winImg.name = 'win'; 
winImg.onload = loadGfx; 
 
loseImg.src = 'lose.png'; 
loseImg.name = 'lose'; 
loseImg.onload = loadGfx;

Schritt 23: Ticker einstellen

Die Ticker-Klasse bietet ein zentrales "tick", das in einem festgelegten Intervall gesendet wird. Wir können die Funktion tick() verwenden, um bestimmten Code regelmäßig auszuführen.

Der folgende Code setzt die Bildrate auf 30 und definiert die Bühne als Listener für die Ticks.

Die TweenJS-Klasse hört sich dieses Häkchen an, um die Animationen auszuführen.

 
/* Ticker */ 
 
Ticker.setFPS(30); 
Ticker.addListener(stage);

Schritt 24: Vorladefunktion

Jedes Mal, wenn eine Grafik geladen wird, wird diese Funktion ausgeführt. Jedes Bild wird einem Bitmap-Objekt zugewiesen und überprüft, ob alle Elemente geladen sind, bevor addGameView aufgerufen wird.

 
function loadGfx(e) 
{ 
	if(e.target.name = 'bg'){bg = new Bitmap(bgImg);} 
	if(e.target.name = 'bg2'){bg2 = new Bitmap(bg2Img);} 
	if(e.target.name = 'ship'){ship = new Bitmap(sImg);} 
	 
	gfxLoaded++; 
	 
	if(gfxLoaded == 9) 
	{ 
		addGameView(); 
	} 
}

Schritt 25: Spielansicht hinzufügen

Wenn alle Grafiken geladen sind, wird die Funktion addGameView aufgerufen. Diese Funktion fügt der Bühne das Schiff, den Lebenszähler, die Punktzahl und die Hintergründe hinzu.

 
function addGameView() 
{ 
	ship.x = centerX - 18.5; 
	ship.y = 480 + 34; 
	 
	/* Add Lives */ 
	 
	for(var i = 0; i < 3; i++) 
	{ 
		var l = new Bitmap(lImg); 
		 
		l.x = 248 + (25 * i); 
		l.y = 463; 
		 
		lives.addChild(l); 
		stage.update(); 
	} 
	 
	/* Score Text */ 
	 
	score = new Text('0', 'bold 14px Courier New', '#FFFFFF'); 
	score.maxWidth = 1000;	//fix for Chrome 17 
	score.x = 2; 
	score.y = 476; 
	 
	/* Second Background */ 
	 
	bg2.y = -480; 
	 
	/* Add gfx to stage and Tween Ship */ 
	 
	stage.addChild(bg, bg2, ship, enemies, bullets, lives, score); 
	Tween.get(ship).to({y:425}, 1000).call(startGame); 
}

Schritt 26: Schiff bewegen

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

 
function moveShip(e) 
{ 
	ship.x = e.stageX - 18.5; 
}

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 zerstören und vor Feinden zu schützen. Diese Funktion wird jedes Mal ausgeführt, wenn der Benutzer auf die Bühne klickt, und platziert eine Kugel vor dem Schiff, die später von der Funktion update() verschoben wird. Es wird auch ein Schießgeräusch abgespielt.

 
function shoot() 
{ 
	var b = new Bitmap(bltImg); 
	 
	b.x = ship.x + 13; 
	b.y = ship.y - 20; 
	 
	bullets.addChild(b); 
	stage.update(); 
	 
	SoundJS.play('shot'); 
}

Schritt 28: Feindfunktion hinzufügen

Es wäre kein Schütze ohne etwas zu schießen. Hier wird mit setInterval() alle 1000 Millisekunden ein Feind erstellt (diesen Wert können Sie im nächsten Schritt ändern), der später von der Funktion update() verschoben wird.

 
function addEnemy() 
{ 
	var e = new Bitmap(eImg); 
	 
	e.x = Math.floor(Math.random() * (320 - 50)) 
	e.y = -50 
	 
	enemies.addChild(e); 
	stage.update(); 
}

Schritt 29: Spiel starten

Diese Zeilen fügen der Bühne und dem Timer die erforderlichen Zuhörer hinzu. Dies umfasst Mausereignisse, zeitgesteuerte Ereignisse (über setInterval) und Ticker-Ereignisse, die das Spiel in jedem Frame aktualisieren.

 
function startGame() 
{ 
	stage.onMouseMove = moveShip; 
	bg.onPress = shoot; 
	bg2.onPress = shoot; 
	 
	Ticker.addListener(tkr, false); 
	tkr.tick = update; 
	 
	timerSource = setInterval('addEnemy()', 1000); 
}

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.

1
2	function update()
3	{
4	/* Move Background */
5
6	bg.y += 5;
7	bg2.y += 5;
8
9	if(bg.y >= 480)
10	{
11	bg.y = -480;
12	}
13	else if(bg2.y >= 480)
14	{
15	bg2.y = -480;
16	}

Schritt 31: Kugeln verschieben

In den nächsten Codezeilen wird geprüft, ob sich Aufzählungszeichen in der Phase befinden. In diesem Fall werden die Kugeln nach oben bewegt.

 
/* Move Bullets */ 
	 
	for(var i = 0; i < bullets.children.length; i++) 
	{ 
		bullets.children[i].y -= 10; 
	}

Schritt 32: Entfernen Sie Offstage Bullets

Fügen wir einige Linien hinzu, um die Position des Geschosses zu ermitteln, und verwenden Sie diese, um ein Geschoss zu zerstören, wenn es nicht mehr sichtbar ist.

 
/* Move Bullets */ 
	 
	for(var i = 0; i < bullets.children.length; i++) 
	{ 
		bullets.children[i].y -= 10; 
		 
		/* Remove Offstage Bullets */ 
		 
		if(bullets.children[i].y < - 20) 
		{ 
			bullets.removeChildAt(i); 
		} 
	}

Schritt 33: Zeigen Sie Boss

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

 
/* Show Boss */ 
	 
	if(parseInt(score.text) >= 500 && boss == null) 
	{ 
		boss = new Bitmap(bImg); 
				 
		SoundJS.play('boss'); 
				 
		boss.x = centerX - 90; 
		boss.y = -183; 
				 
		stage.addChild(boss); 
		Tween.get(boss).to({y:40}, 2000)   //tween the boss onto the play area 
	}

Schritt 34: Gegner bewegen

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

 
/* Move Enemies */ 
	 
	for(var j = 0; j < enemies.children.length; j++) 
	{ 
		enemies.children[j].y += 5;

Schritt 35: Entfernen Sie Gegner außerhalb der Bühne

Wir überprüfen auch die Positionen der Feinde, um sie zu zerstören, wenn sie nicht mehr sichtbar sind.

 
/* Move Enemies */ 
	 
	for(var j = 0; j < enemies.children.length; j++) 
	{ 
		enemies.children[j].y += 5; 
		 
		/* Remove Offstage Enemies */ 
		 
		if(enemies.children[j].y > 480 + 50) 
		{ 
			enemies.removeChildAt(j); 
		}

Schritt 36: Bullet - Enemy Collision

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

 
for(var k = 0; k < bullets.children.length; k++) 
{ 
	/* Bullet - Enemy Collision */ 
	 
	if(bullets.children[k].x >= enemies.children[j].x && bullets.children[k].x + 11 < enemies.children[j].x + 49 && bullets.children[k].y < enemies.children[j].y + 40) 
	{ 
		bullets.removeChildAt(k); 
		enemies.removeChildAt(j); 
		stage.update(); 
		SoundJS.play('explo'); 
		score.text = parseFloat(score.text + 50); 
	}

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.

 
/* Bullet - Boss Collision */ 
			 
	if(boss != null && bullets.children[k].x >= boss.x && bullets.children[k].x + 11 < boss.x + 183 && bullets.children[k].y < boss.y + 162) 
	{ 
		bullets.removeChildAt(k); 
		bossHealth--; 
		stage.update(); 
		SoundJS.play('explo'); 
		score.text = parseInt(score.text + 50); 
	} 
}

Schritt 38: Schiff - Feindliche Kollision

Hier prü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.

 
/* Ship - Enemy Collision */ 
		 
	if(enemies.hitTest(ship.x, ship.y) || enemies.hitTest(ship.x + 37, ship.y)) 
	{ 
		enemies.removeChildAt(j); 
		lives.removeChildAt(lives.length); 
		ship.y = 480 + 34; 
		Tween.get(ship).to({y:425}, 500) 
		SoundJS.play('explo'); 
	} 
}

Schritt 39: Überprü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 nächsten Zeilen erkennen diese Situationen und rufen eine Warnfunktion mit dem richtigen Parameter auf.

 
/* Check for win */ 
	 
	if(boss != null && bossHealth <= 0) 
	{ 
		alert('win'); 
	} 
	 
	/* Check for lose */ 
	 
	if(lives.children.length <= 0) 
	{ 
		alert('lose'); 
	} 
}

Schritt 40: Alarm

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

 
function alert(e) 
{ 
	/* Remove Listeners */ 
		 
	stage.onMouseMove = null; 
	bg.onPress = null; 
	bg2.onPress = null; 
	 
	Ticker.removeListener(tkr); 
	tkr = null; 
	 
	timerSource = null; 
	 
	/* Display Correct Message */ 
	 
	if(e == 'win') 
	{ 
		win = new Bitmap(winImg); 
		win.x = centerX - 64; 
		win.y = centerY - 23; 
		stage.addChild(win); 
		stage.removeChild(enemies, boss); 
	} 
	else 
	{ 
		lose = new Bitmap(loseImg); 
		lose.x = centerX - 64; 
		lose.y = centerY - 23; 
		stage.addChild(lose); 
		stage.removeChild(enemies, ship); 
	} 
	 
	bg.onPress = function(){window.location.reload();}; 
	bg2.onPress = function(){window.location.reload();}; 
	stage.update(); 
}

Schritt 41: Testen

Speichern Sie Ihre Arbeit (falls nicht) und ö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 wäre, die Feinde oder den Boss auf den Spieler zurückschießen zu lassen.

Ich hoffe dir hat dieses Tutorial gefallen, danke fürs Lesen!