Erstellen Sie mit EaselJS ein Whack-a-Mole-Spiel in HTML5

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

 
<!DOCTYPE html> 
<html> 
	<head> 
		<title>Whack A Worm</title> 
	</head> 
	<body> 
	</body> 
</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 das würde das mobile Erlebnis drastisch abnehmen.

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

Schritt 6: JavaScript-Bibliotheken

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

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

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.

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

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.

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

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.

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

Schritt 11: Hintergrund

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

1
2	/* Background */
3
4	var titleBg;

Schritt 12: Titelansicht

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

 
/* Title View */ 
 
var titleBgImg = new Image(); 
var titleBg; 
var playBtnImg = new Image(); 
var playBtn; 
var creditsBtnImg = new Image(); 
var creditsBtn; 
var titleView = new Container();

Schritt 13: Credits

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

 
/* Credits */ 
 
var creditsViewImg = new Image(); 
var creditsView;

Schritt 14: Hintergrund der Spielansicht

Der Hintergrund für die Spielansicht.

 
/* Game Bg */ 
 
var gameBgImg = new Image(); 
var gameBg;

Schritt 15: Alarm

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

 
/* Alert */ 
 
var alertBgImg = new Image(); 
var alertBg;

Schritt 16: Punktzahl

Der Bewertungswert wird von der nächsten Variablen verarbeitet.

1
2	/* Score */
3
4	var score;

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.

 
/* Worms */ 
 
var wormImg = new Image(); 
var worm; 
var lastWorm;

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.

1
2	var wormsX = [80, 198, 338, 70, 225, 376, 142, 356];
3	var wormsY = [11, 51, 34, 110, 136, 96, 211, 186];

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

 
var centerX = 240; 
var centerY = 160; 
var gfxLoaded = 0; //used as a preloader 
 
var timerSource; 
var currentWorms = 0; //worms already shown 
var wormsHit = 0; 
var totalWorms = 10; //total of worms to display

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.

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

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.

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

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.

1
2	stage.mouseEventsEnabled = true;

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.

 
/* Load GFX */ 
 
titleBgImg.src = 'titleBg.png'; 
titleBgImg.name = 'titleBg'; 
titleBgImg.onload = loadGfx; 
 
gameBgImg.src = 'gameBg.png'; 
gameBgImg.name = 'gameBg'; 
gameBgImg.onload = loadGfx; 
 
playBtnImg.src = 'playBtn.png'; 
playBtnImg.name = 'playBtn'; 
playBtnImg.onload = loadGfx; 
 
creditsBtnImg.src = 'creditsBtn.png'; 
creditsBtnImg.name = 'creditsBtn'; 
creditsBtnImg.onload = loadGfx; 
 
creditsViewImg.src = 'creditsView.png'; 
creditsViewImg.name = 'credits'; 
creditsViewImg.onload = loadGfx; 
 
alertBgImg.src = 'alertBg.png'; 
alertBgImg.name = 'alertBg'; 
alertBgImg.onload = loadGfx; 
 
wormImg.src = 'worm.png'; 
wormImg.name = 'worm'; 
wormImg.onload = loadGfx;

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.

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

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.

 
function loadGfx(e) 
{ 
	if(e.target.name = 'titleBg'){titleBg = new Bitmap(titleBgImg);} 
	if(e.target.name = 'gameBg'){gameBg = new Bitmap(gameBgImg);} 
	if(e.target.name = 'playBtn'){playBtn = new Bitmap(playBtnImg);} 
	if(e.target.name = 'creditsBtn'){creditsBtn = new Bitmap(creditsBtnImg);} 
	if(e.target.name = 'alertBg'){alertBg = new Bitmap(alertBgImg);} 
	/* --CreditsView 
	   --Worms */ 
	 
	gfxLoaded++; 
	 
	if(gfxLoaded == 7) 
	{ 
		addTitleView(); 
	} 
}

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.

 
function addTitleView() 
{	 
	/* Add GameView BG */ 
	 
	stage.addChild(gameBg);

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.

 
/* Title Screen */ 
 
playBtn.x = centerX - 25; 
playBtn.y = centerY + 35; 
 
creditsBtn.x = centerX - 40; 
creditsBtn.y = centerY + 80; 
			 
titleView.addChild(titleBg, playBtn, creditsBtn); 
 
stage.addChild(titleView); 
 
startButtonListeners('add'); 
 
stage.update(); 
}

Schritt 28: Starten Sie die Button Listener

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

 
function startButtonListeners(action) 
{ 
	if(action == 'add') 
	{ 
		titleView.getChildAt(1).onPress = showGameView; 
		titleView.getChildAt(2).onPress = showCredits; 
	} 
	else 
	{ 
		titleView.getChildAt(1).onPress = null; 
		titleView.getChildAt(2).onPress = null; 
	} 
}

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.

 
function showCredits() 
{ 
	playBtn.visible = false; 
	creditsBtn.visible = false; 
	creditsView = new Bitmap(creditsViewImg); 
	stage.addChild(creditsView); 
	creditsView.x = -203; 
	 
	Tween.get(creditsView).to({x:0}, 200).call(function(){creditsView.onPress = hideCredits;}); 
}

Schritt 30: Credits ausblenden

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

 
function hideCredits() 
{ 
	playBtn.visible = true; 
	creditsBtn.visible = true; 
	Tween.get(creditsView).to({x:-203}, 200).call(function(){creditsView.onPress = null; stage.removeChild(creditsView); creditsView = null;}); 
}

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.

 
function showGameView() 
{ 
	Tween.get(titleView).to({x: -480}, 200).call( 
		function(){ 
			startButtonListeners('rmv');  
			stage.removeChild(titleView);  
			titleView = null;  
			showWorm(); 
		} 
	); 
}

Schritt 32: Partiturtext

Dieser Code erstellt das Textobjekt, das die Partitur anzeigt.

 
score = new Text('0' + '/' + totalWorms, 'bold 15px Arial', '#EEE'); 
score.maxWidth = 1000;    //fix for Chrome 17 
score.x = 58; 
score.y = 21; 
stage.addChild(score);

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.

 
function showWorm() 
{ 
	if(currentWorms == totalWorms) 
	{ 
		showAlert(); 
	}

Schritt 34: Entfernen Sie den letzten Wurm

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

 
else 
	{	 
		if(lastWorm != null) 
		{ 
			lastWorm.onPress = null; 
			stage.removeChild(lastWorm); 
			stage.update(); 
			lastWorm = null; 
		}

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.

1
2	var randomPos = Math.floor(Math.random() * 8);

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.

 
var worm = new Bitmap(wormImg); 
 
worm.x = wormsX[randomPos]; 
worm.y = wormsY[randomPos]; 
stage.addChild(worm); 
worm.onPress = wormHit; 
 
lastWorm = worm;

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.

 
lastWorm.scaleY = 0.3; 
lastWorm.y += 42; 
stage.update(); 
 
Tween.get(lastWorm).to({scaleY: 1, y: wormsY[randomPos]}, 200).wait(1000).call(function(){currentWorms++; showWorm()});

Schritt 38: Wurm treffen

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

 
function wormHit() 
{ 
	wormsHit++; 
	score.text = wormsHit + '/' + totalWorms; 
	 
	lastWorm.onPress = null; 
	stage.removeChild(lastWorm); 
	lastWorm = null; 
	stage.update(); 
}

Schritt 39: Warnung anzeigen

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

 
function showAlert() 
{ 
	alertBg.x = centerX - 120; 
	alertBg.y = -80; 
	stage.addChild(alertBg); 
	 
	Tween.get(alertBg).to({y:centerY - 80}, 200).call(function() 
	{ 
		Ticker.removeAllListeners(); 
		var score = new Text(wormsHit + '/' + totalWorms, 'bold 20px Arial', '#EEE'); 
		score.maxWidth = 1000;    //fix for Chrome 17 
		score.x = 220; 
		score.y = 205; 
		stage.addChild(score); 
		stage.update(); 
	}); 
}

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!