Erstellen eines Pong-Spiels mit EaselJS in HTML5

() translation by (you can also view the original English article)

In diesem Tutorial erstellen wir mithilfe der EaselJS-Bibliothek einen Klon des klassischen Spiels Pong in HTML5. Das Spiel wird mehrere Bildschirme, Soundeffekte und einen (sehr einfachen) KI-Gegner haben.

Schritt 1: Kurze Übersicht

Mit vorgefertigten Grafiken werden wir ein unterhaltsames Pong-Spiel in HTML5 mithilfe der EaselJS-Bibliothek codieren, die eine Flash-ähnliche Oberfläche für die HTML5-Zeichenfläche bietet. Eine Einführung in EaselJS finden Sie in diesem Activetuts+ Artikel.

Der Spieler kann ein Paddel mit der Maus steuern und gegen den Computer-Controller-Gegner spielen, um Punkte zu erhalten.

Schritt 2: Schnittstelle

Es wird eine einfache Oberfläche mit einem neofuturistischen Stil verwendet. Dies umfasst mehrere Formen, Schaltflächen, Bitmaps und mehr.

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

Schritt 3: Holen Sie sich EaselJS

Die EaselJS-Bibliothek wird zum Erstellen unseres Spiels verwendet. Lesen Sie das Tutorial Erste Schritte, wenn Sie neu in dieser Bibliothek sind.

Sie können die neueste Version von EaselJS von der offiziellen Website herunterladen. Dies kann jedoch mit dem Code hier nicht kompatibel sein. Ich empfehle daher, die Version der Bibliothek zu verwenden, die im Quelldownload enthalten ist.

Schritt 4: HTML-Struktur

Bereiten wir unser HTML-Dokument vor. Wir beginnen mit den Grundlagen, nur einem Überblick über die Barebones:

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

Schritt 5: Mobile Highlight ausblenden

Wir müssen auch ein wenig CSS hinzufügen, um die Standardhervorhebung zu entfernen, die angewendet wird, wenn Sie in einem mobilen Browser auf ein Element tippen. Ohne dies würde das mobile Erlebnis drastisch abnehmen.

 
<!DOCTYPE html> 
<html> 
	<head> 
		<title>Pong</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>Pong</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>/

Neben EaselJS verwenden wir auch TweenJS (für die Bearbeitung von Bildschirmübergängen und der Spieleschleife) und SoundJS (für die Soundeffekte).

Main.js ist die Datei, in der wir unseren eigenen JS-Code speichern.

Schritt 7: Hauptfunktion aufrufen

In den nächsten Zeilen rufen wir unsere Main() -Funktion auf. Dies ist die Funktion, mit der unsere Anwendung gestartet wird. Es wird später im Tutorial in Main.js erstellt.

 
<!DOCTYPE html> 
<html> 
	<head> 
		<title>Pong</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: Canvas Tag

In dieser Zeile wird eine HTML5-Zeichenfläche erstellt. Wir weisen ihm eine ID zu, damit wir später darauf verweisen und auch seine Breite und Höhe festlegen können.

 
<!DOCTYPE html> 
<html> 
	<head> 
		<title>Pong</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="Pong" width="480" height="320"></canvas> 
	</body> 
</html>

Schritt 9: Erstellen Sie Main.js

Beginnen wir mit der Erstellung unseres Spiels!

Öffnen Sie Ihren bevorzugten JavaScript-Editor (jeder Texteditor funktioniert, aber Sie haben keine Syntaxhervorhebung) und bereiten Sie das Schreiben des Codes vor. Denken Sie daran, die Datei als Main.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 Stufe, die damit verknüpft wird. Die stage Variable verhält sich ähnlich wie die AS3-Stufe.

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

Schritt 11: Hintergrund

Diese Variable speichert das Titelhintergrundbild.

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

Schritt 12: Titelansicht

Dies ist die Titelansicht, der erste interaktive Bildschirm, der in unserem Spiel angezeigt wird. Diese Variablen speichern ihre Komponenten.

 
/* Title View */ 
 
var mainImg = new Image(); 
var main; 
var startBImg = new Image(); 
var startB; 
var creditsBImg = new Image(); 
var creditsB; 
 
var TitleView = new Container();

Schritt 13: Credits

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

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

Schritt 14: Spielansicht

Die nächsten Variablen speichern die einzelnen Grafiken, die in der Spielansicht angezeigt werden:

 
/* Game View */ 
 
var playerImg = new Image(); 
var player; 
var ballImg = new Image(); 
var ball; 
var cpuImg = new Image(); 
var cpu; 
var winImg = new Image(); 
var win; 
var loseImg = new Image(); 
var lose;

Schritt 15: Punktzahl

Die Bewertungswerte werden von den nächsten Variablen verarbeitet:

 
/* Score */ 
 
var playerScore; 
var cpuScore;

Schritt 16: Variablen

Dies sind die Variablen, die wir verwenden werden. Lesen Sie die Kommentare im Code, um zu verstehen, wofür sie bestimmt sind:

 
var xSpeed = 5; //Horizontal speed of the ball 
var ySpeed = 5; //Vertical speed of the ball 
var gfxLoaded = 0; //used as a preloader, counts the already loaded items 
var tkr = new Object; //used as an event listener to the Ticker

Schritt 17: Erstellen Sie Soundeffekte

Wir werden Soundeffekte verwenden, um das Spielgefühl zu verbessern. Die Sounds in diesem Beispiel wurden mit dem hervorragenden kostenlosen Werkzeug as3sfxr erstellt und mit Audacity in MP3 konvertiert.

Die erforderlichen Sounds finden Sie alle im Quellen-Download. Wenn Sie Ihre eigenen erstellen möchten, benötigen Sie vier:

hit.mp3: wird gespielt, wenn der Ball ein Paddel trifft
playerScore.mp3: wird gespielt, wenn der Spieler ein Tor erzielt
enemyScore.mp3: wird gespielt, wenn der Feind ein Tor erzielt
wall.mp3: wird gespielt, wenn der Ball die obere oder untere Grenze erreicht

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 werden die notwendigen Funktionen aufgerufen, um das Spiel zu starten.

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

Schritt 19: 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. Fügen Sie dies zu Main() hinzu.

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

Schritt 20: 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. Fügen Sie dies zu Main() hinzu.

1
2	stage.mouseEventsEnabled = true;

Schritt 21: Sounds laden

Wir werden SoundJS verwenden, um unserem Spiel Sounds hinzuzufügen. Schreiben Sie den folgenden Code, um die Sounds zu importieren, die wir verwenden werden. Fügen Sie dies zu Main() hinzu.

 
/* Sound */ 
 
SoundJS.addBatch([ 
	{name:'hit', src:'hit.mp3', instances:1}, 
	{name:'playerScore', src:'playerScore.mp3', instances:1}, 
	{name:'enemyScore', src:'enemyScore.mp3', instances:1}, 
	{name:'wall', src:'wall.mp3', instances:1}]);

Schritt 22: Laden Sie Grafiken

Dieser Code wird verwendet, um die Grafiken mithilfe einer Funktion vorzuladen, die wir später schreiben werden. Es setzt die zuvor erstellten Bildobjekte so, dass sie auf die relevanten Quell-PNG-Dateien in unserem Dokumentordner verweisen.

Jedem wird ein Name gegeben, damit wir erkennen können, welches Bild später geladen wird, und zuletzt wird die Funktion aufgerufen, die die geladenen Bilder verarbeitet.

Fügen Sie dies zu Main() hinzu.

 
/* Load GFX */ 
 
bgImg.src = 'bg.png'; 
bgImg.name = 'bg'; 
bgImg.onload = loadGfx; 
 
mainImg.src = 'main.png'; 
mainImg.name = 'main'; 
mainImg.onload = loadGfx; 
 
startBImg.src = 'startB.png'; 
startBImg.name = 'startB'; 
startBImg.onload = loadGfx; 
 
creditsBImg.src = 'creditsB.png'; 
creditsBImg.name = 'creditsB'; 
creditsBImg.onload = loadGfx; 
 
creditsViewImg.src = 'credits.png'; 
creditsViewImg.name = 'credits'; 
creditsViewImg.onload = loadGfx; 
 
playerImg.src = 'paddle.png'; 
playerImg.name = 'player'; 
playerImg.onload = loadGfx; 
 
ballImg.src = 'ball.png'; 
ballImg.name = 'ball'; 
ballImg.onload = loadGfx; 
 
cpuImg.src = 'paddle.png'; 
cpuImg.name = 'cpu'; 
cpuImg.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 eine zentralisierte Tick- oder Heartbeat-Übertragung in einem festgelegten Intervall. Dies kann verwendet werden, um die Spielschleife auszulösen.

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. Fügen Sie dies zu Main() hinzu.

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

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 Sie fortfahren.

 
function loadGfx(e) 
{ 
	if(e.target.name = 'bg'){bg = new Bitmap(bgImg);} 
	if(e.target.name = 'main'){main = new Bitmap(mainImg);} 
	if(e.target.name = 'startB'){startB = new Bitmap(startBImg);} 
	if(e.target.name = 'creditsB'){creditsB = new Bitmap(creditsBImg);} 
	if(e.target.name = 'credits'){credits = new Bitmap(creditsViewImg);} 
	if(e.target.name = 'player'){player = new Bitmap(playerImg);} 
	if(e.target.name = 'ball'){ball = new Bitmap(ballImg);} 
	if(e.target.name = 'cpu'){cpu = new Bitmap(cpuImg);} 
	if(e.target.name = 'win'){win = new Bitmap(winImg);} 
	if(e.target.name = 'lose'){lose = new Bitmap(loseImg);} 
	 
	gfxLoaded++; 
	 
	if(gfxLoaded == 10) // remember to change this if you add more images 
	{ 
		addTitleView(); 
	} 
}

Schritt 25: Titelansicht hinzufügen

Wenn alle Grafiken geladen sind, wird die Titelansicht durch die folgende Funktion zur Bühne hinzugefügt:

 
function addTitleView() 
{ 
	startB.x = 240 - 31.5; 
	startB.y = 160; 
	startB.name = 'startB'; 
	 
	creditsB.x = 241 - 42; 
	creditsB.y = 200; 
	 
	TitleView.addChild(main, startB, creditsB); 
	stage.addChild(bg, TitleView); 
	stage.update();

Schritt 26: Start-Taste Listener

Diese Funktion fügt den TitleView-Schaltflächen die erforderlichen Listener hinzu (sie ist Teil von addTitleView()):

1
2	startB.onPress = addGameView;
3	creditsB.onPress = showCredits;
4	}

Schritt 27: 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() 
{ 
	// Show Credits 
		 
	credits.x = 480; 
		 
	stage.addChild(credits); 
	stage.update(); 
	Tween.get(credits).to({x:0}, 300); 
	credits.onPress = hideCredits; 
}

Schritt 28: Credits ausblenden

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

 
// Hide Credits 
 
function hideCredits(e) 
{ 
	Tween.get(credits).to({x:480}, 300).call(rmvCredits); 
} 
 
// Remove Credits 
 
function rmvCredits() 
{ 
	stage.removeChild(credits); 
}

Lassen Sie uns hier anhalten, um zu testen, was wir bisher getan haben. Klicken Sie hier für eine Meilenstein-Demo.

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

Denken Sie daran, dass der Meilenstein in den Quelldateien enthalten ist. Wenn Ihre Datei diese also aus irgendeinem Grund nicht nachahmt, vergleichen Sie Ihre Quelle mit meiner, um festzustellen, was dies verursachen könnte.

Schritt 29: Spielansicht anzeigen

In den folgenden Zeilen wird die TitleView von der Bühne entfernt und die GameView-Elemente zur Bühne hinzugefügt. Dem Hintergrund wird ein Maus-Listener hinzugefügt, um das Spiel zu starten, wenn Sie darauf klicken.

 
function addGameView() 
{ 
	// Destroy Menu & Credits screen 
	 
	stage.removeChild(TitleView); 
	TitleView = null; 
	credits = null; 
	 
	// Add Game View 
	 
	player.x = 2; 
	player.y = 160 - 37.5; 
	cpu.x = 480 - 25; 
	cpu.y = 160 - 37.5; 
	ball.x = 240 - 15; 
	ball.y = 160 - 15; 
	 
	// Score 
	 
	playerScore = new Text('0', 'bold 20px Arial', '#A3FF24'); 
	playerScore.maxWidth = 1000;	//fix for Chrome 17 
	playerScore.x = 211; 
	playerScore.y = 20; 
	 
	cpuScore = new Text('0', 'bold 20px Arial', '#A3FF24'); 
	cpuScore.maxWidth = 1000;	//fix for Chrome 17 
	cpuScore.x = 262; 
	cpuScore.y = 20; 
	 
	stage.addChild(playerScore, cpuScore, player, cpu, ball); 
	stage.update(); 
	 
	// Start Listener  
	 
	bg.onPress = startGame; 
}

Schritt 30: Spielerbewegung

Der Spieler bewegt sich zusammen mit der vertikalen Position der Maus:

 
function movePaddle(e) 
{ 
	// Mouse Movement 
	 
	player.y = e.stageY; 
}

Schritt 31: Spiel starten

Dieser Code wird ausgeführt, wenn der Spieler auf den Spielhintergrund klickt. Er fügt den Maus-Listener hinzu, der die Funktion im vorherigen Schritt auslöst, und fügt einen Ticker hinzu, um die Spielschleife zu steuern.

Achten Sie auf die Art und Weise, wie der Ticker erstellt wird: Dies entspricht einem Timer-Ereignis in AS3.

 
function startGame(e) 
{ 
	bg.onPress = null; 
	stage.onMouseMove = movePaddle; 
	 
	Ticker.addListener(tkr, false); 
	tkr.tick = update; 
}

Schritt 32: Zurücksetzen

Wenn ein Punkt erzielt wird (vom Spieler oder vom Computer), kehren die Paddel und der Ball in ihre ursprüngliche Position zurück und das Spiel wird unterbrochen:

 
function reset() 
{ 
	ball.x = 240 - 15; 
	ball.y = 160 - 15; 
	player.y = 160 - 37.5; 
	cpu.y = 160 - 37.5; 
	 
	stage.onMouseMove = null; //stop listening to the mouse 
	Ticker.removeListener(tkr); //pause the game 
	bg.onPress = startGame; 
}

Schritt 33: Ballbewegung

Wenn das Spiel nicht unterbrochen wird, wird der Ball in jedem Frame mit den zuvor erstellten Variablen bewegt.

 
function update() 
{ 
	// Ball Movement  
 
	ball.x = ball.x + xSpeed; 
	ball.y = ball.y + ySpeed;

Schritt 34: CPU-Bewegung

Dieser Code steuert die Bewegung des Computers. Das Paddel wird so bewegt, dass es dem Ball folgt und dennoch eine gewisse Fehlerquote aufweist.

1
2	if(cpu.y < ball.y) {
3	cpu.y = cpu.y + 2.5;
4	}
5	else if(cpu.y > ball.y) {
6	cpu.y = cpu.y - 2.5;
7	}

Schritt 35: Wandkollisionen

Hier prüfen wir, ob sich der Ball am oberen oder unteren Rand der Leinwand befindet. In diesem Fall wird die vertikale Geschwindigkeit umgekehrt und ein Ton abgespielt.

1
2	if((ball.y) < 0) { ySpeed = -ySpeed; SoundJS.play('wall');};//Up
3	if((ball.y + (30)) > 320) { ySpeed = -ySpeed; SoundJS.play('wall');};//down

Schritt 36: Ergebnisse

Nun die linke und rechte Seite. Dieser Code ändert auch die Punktzahl, ruft die Rücksetzfunktion auf und spielt je nach der Seite, auf der der Ball berührt wurde, einen anderen Klang.

 
/* CPU Score */ 
 
if((ball.x) < 0) 
{ 
	xSpeed = -xSpeed; 
	cpuScore.text = parseInt(cpuScore.text + 1); 
	reset(); 
	SoundJS.play('enemyScore'); 
} 
 
/* Player Score */ 
 
if((ball.x + (30)) > 480) 
{ 
	xSpeed = -xSpeed; 
	playerScore.text = parseInt(playerScore.text + 1); 
	reset(); 
	SoundJS.play('playerScore'); 
}

Schritt 37: Ball-Paddel-Kollisionen

Der folgende Code überprüft, ob der Ball mit einem Paddel kollidiert, indem er die Position des Paddels mit den Koordinaten des Balls vergleicht. Wenn sich die Begrenzungsrahmen der beiden kreuzen, kommt es zu einer Kollision, sodass wir die x-Geschwindigkeit des Balls umkehren und einen Ton abspielen.

 
/* Cpu collision */ 
 
if(ball.x + 30 > cpu.x && ball.x + 30 < cpu.x + 22 && ball.y >= cpu.y && ball.y < cpu.y + 75) 
{ 
	xSpeed *= -1; 
	SoundJS.play('hit'); 
} 
 
/* Player collision */ 
 
if(ball.x <= player.x + 22 && ball.x > player.x && ball.y >= player.y && ball.y < player.y + 75) 
{ 
	xSpeed *= -1; 
	SoundJS.play('hit'); 
}

Schritt 38: Auf Win/Game Over prüfen

Sie können die Endbedingung in den nächsten Zeilen ändern - sie ist standardmäßig auf 10 Punkte festgelegt.

 
/* Check for Win */ 
 
if(playerScore.text == '10') 
{ 
	alert('win'); 
} 
 
/* Check for Game Over */ 
 
if(cpuScore.text == '10') 
{ 
	alert('lose'); 
}

Schritt 39: Alarm

Diese Funktion stoppt das Spiel und zeigt eine Warnung an, deren Inhalt vom Spielergebnis abhängt.

 
function alert(e) 
{ 
	Ticker.removeListener(tkr); 
	stage.onMouseMove = null; 
	bg.onPress = null 
	 
	if(e == 'win') 
	{ 
		win.x = 140; 
		win.y = -90; 
	 
		stage.addChild(win); 
		Tween.get(win).to({y: 115}, 300); 
	} 
	else 
	{ 
		lose.x = 140; 
		lose.y = -90; 
	 
		stage.addChild(lose); 
		Tween.get(lose).to({y: 115}, 300); 
	} 
}

Schritt 40: Testen

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

Schlussfolgerung

Versuchen Sie, die Variablen des Spiels zu ändern, um Ihre eigene Version des Spiels zu erstellen!

Ich hoffe dir hat dieses Tutorial gefallen, danke fürs Lesen!