Lernen Sie CreateJS, indem Sie ein HTML5-Pong-Spiel erstellen

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

Das Web bewegt sich schnell - so schnell, dass unser ursprüngliches EaselJS-Tutorial bereits veraltet ist! In diesem Tutorial erfahren Sie, wie Sie die neueste CreateJS-Suite verwenden, indem Sie einen einfachen Pong-Klon erstellen.

Endergebnis Vorschau

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

Anklicken um abzuspielen

Dieses Tutorial basiert auf Carlos Yanez Create a Pong-Spiel in HTML5 mit EaselJS, das wiederum auf seinem Handbuch Erste Schritte mit EaselJS basiert. Die Grafiken und Soundeffekte stammen alle aus dem vorherigen Tutorial.

Schritt 1: Erstellen Sie `index.html`

Dies wird unsere Hauptdatei index.html sein:

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

		<script src="http://code.createjs.com/easeljs-0.4.2.min.js"></script>
		<script src="http://code.createjs.com/tweenjs-0.2.0.min.js"></script>
		<script src="http://code.createjs.com/soundjs-0.2.0.min.js"></script>
		<script src="http://code.createjs.com/preloadjs-0.1.0.min.js"></script>
		<script src="http://code.createjs.com/movieclip-0.4.1.min.js"></script>
		<script src="assets/soundjs.flashplugin-0.2.0.min.js"></script>
		<script src="Main.js"></script>
		
	</head>
	<body onload="Main();">
		<canvas id="PongStage" width="480" height="320"></canvas>
	</body>
</html>

Wie Sie sehen, ist es ziemlich kurz und besteht hauptsächlich aus dem Laden der CreateJS-Bibliotheken.

Seit der Veröffentlichung von CreateJS (das im Grunde alle separaten EaselJS-Bibliotheken bündelt) müssen wir die JS-Dateien nicht mehr herunterladen und auf unserer Website hosten. Die Dateien werden jetzt in einem CDN (Content Delivery Network) abgelegt, mit dem wir diese Dateien so schnell wie möglich aus der Ferne laden können.

Überprüfen wir den Code:

1	<style>/* Removes Mobile Highlight / {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}</style>

Diese Zeile entfernt die mobile Hervorhebung, die möglicherweise angezeigt wird, wenn Sie versuchen, das Spiel auf dem Handy zu spielen. (Durch die mobile Hervorhebung wird das Canvas-Objekt hervorgehoben und Ihre Fingerbewegungen werden ignoriert.)

Als nächstes müssen ie CreateJS-Bibliotheken geladen werden:>

<script src="http://code.createjs.com/easeljs-0.4.2.min.js"></script>
		<script src="http://code.createjs.com/tweenjs-0.2.0.min.js"></script>
		<script src="http://code.createjs.com/soundjs-0.2.0.min.js"></script>
		<script src="http://code.createjs.com/preloadjs-0.1.0.min.js"></script>
		<script src="http://code.createjs.com/movieclip-0.4.1.min.js"></script>

Dieser Code lädt die JS-Dateien vom CreateJS-CDN und ermöglicht es uns grundsätzlich, alle CreateJS-Funktionen in unserem Code zu verwenden

Als Nächstes laden wir das SoundJS Flash-Plugin, das Soundunterstützung für Browser bietet, die HTML5 Audio nicht unterstützen. Ihnen hilft SWF (eines Flash-Objekts) zum Laden der Sounds.

1	<script src="assets/soundjs.flashplugin-0.2.0.min.js"></script>

In diesem Fall verwenden wir das CDN nicht. Stattdessen laden wir die SoundJS-Bibliothek von http://createjs.com/#!/SoundJS/download herunter und platzieren die Dateien soundjs.flashplugin-0.2.0.min.js und FlashAudioPlugin.swf in einem lokalen Ordner mit dem Namen assets.

Als letzte der JS-Dateien laden wir die Datei Main.js, die den gesamten Code für unser Spiel enthält:

1	<script src="Main.js"></script>

Zum Schluss platzieren wir ein Canvas-Objekt auf unserer Bühne.

1	<body onload="Main();">
2	<canvas id="PongStage" width="480" height="320"></canvas>
3	</body>

Jetzt können wir mit der Arbeit am Spielcode beginnen.

Schritt 2: Die Variablen

Unser Spielcode befindet sich in einer Datei namens Main.js. Erstellen und speichern Sie diese jetzt.

Definieren wir Variablen für alle Grafikobjekte im Spiel:

var canvas; //Will be linked to the canvas in our index.html page
var stage; //Is the equivalent of stage in AS3; we'll add "children" to it

// Graphics
//[Background]

var bg; //The background graphic

//[Title View]
 

var main; //The Main Background
var startB; //The Start button in the main menu
var creditsB; //The credits button in the main menu

//[Credits]


var credits; //The Credits screen

//[Game View]


var player; //The player paddle graphic
var ball; //The ball graphic
var cpu; //The CPU paddle
var win; //The winning popup
var lose; //The losing popup

Ich habe für jede Variable einen Kommentar hinzugefügt, damit Sie wissen, was wir in diese Variable laden

Weiter bekommen Sie nächste:

//[Score]

var playerScore; //The main player score
var cpuScore; //The CPU score
var cpuSpeed=6; //The speed of the CPU paddle; the faster it is the harder the game is

Wir benötigen Variablen für die Geschwindigkeit des Balls:

1	// Variables
2
3	var xSpeed = 5;
4	var ySpeed = 5;

Sie können diese Werte beliebig ändern, wenn Sie das Spiel einfacher oder schwieriger machen möchten.

Wenn Sie ein Flash-Entwickler sind, wissen Sie, dass der onEnterFrame von Flash beim Erstellen von Spielen sehr nützlich ist, da in jedem Frame Dinge passieren müssen. (Wenn Sie mit dieser Idee nicht vertraut sind, lesen Sie diesen Artikel in der Game Loop.)

Wir haben ein Äquivalent für onEnterFrame in CreateJS, und das ist das ticker-Objekt, das Code im Bruchteil einer Sekunde ausführen kann. Erstellen wir die Variable, die mit ihr verknüpft wird:

1	var tkr = new Object;

Danach haben wir den Preloader, der die neuen PreloadJS-Methoden verwenden wird.

1	//preloader
2	var preloader;
3	var manifest;
4	var totalLoaded = 0;

preloader - enthält das PreloadJS-Objekt.
manifest - enthält die Liste der Dateien, die geladen werden müssen.
totalLoaded - Diese Variable enthält die Anzahl der bereits geladenen Dateien.

Last but not least haben wir in unserer Liste der Variablen TitleView, das mehrere Grafiken enthält, um sie zusammen anzuzeigen (wie ein Flash DisplayObjectContainer).

1	var TitleView = new Container();

Fahren wir mit der Hauptfunktion fort...

Schritt 3: Die Main() Funktion

Diese Funktion ist die erste Funktion, die ausgeführt wird, nachdem alle JS-Dateien aus der index.html geladen wurden. Aber wie heißt diese Funktion?

Erinnern Sie sich an diese Zeile aus der Datei index.html?

1	<body onload="Main();">

Dieses Codefragment besagt, dass nach dem Laden des HTML (und der JS-Bibliotheken) die Main funktion ausgeführt werden sollte.

Lassen Sie es uns überprüfen:

function Main()
{
	/* Link Canvas */
	
	canvas = document.getElementById('PongStage');
  	stage = new Stage(canvas);
  		
  	stage.mouseEventsEnabled = true;
  	
  	
	/* Set The Flash Plugin for browsers that don't support SoundJS */
  	SoundJS.FlashPlugin.BASE_PATH = "assets/";
    if (!SoundJS.checkPlugin(true)) {
      alert("Error!");
      return;
    }

  	manifest = [
				{src:"bg.png", id:"bg"},
				{src:"main.png", id:"main"},
				{src:"startB.png", id:"startB"},
				{src:"creditsB.png", id:"creditsB"},
				{src:"credits.png", id:"credits"},
				{src:"paddle.png", id:"cpu"},
				{src:"paddle.png", id:"player"},
				{src:"ball.png", id:"ball"},
				{src:"win.png", id:"win"},
				{src:"lose.png", id:"lose"},
				{src:"playerScore.mp3|playerScore.ogg", id:"playerScore"},
				{src:"enemyScore.mp3|enemyScore.ogg", id:"enemyScore"},
				{src:"hit.mp3|hit.ogg", id:"hit"},
				{src:"wall.mp3|wall.ogg", id:"wall"}
			];



  	preloader = new PreloadJS();
  	preloader.installPlugin(SoundJS);
    preloader.onProgress = handleProgress;
    preloader.onComplete = handleComplete;
    preloader.onFileLoad = handleFileLoad;
    preloader.loadManifest(manifest);

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

Lassen Sie uns jeden Teil aufschlüsseln:

1	canvas = document.getElementById('PongStage');
2	stage = new Stage(canvas);
3
4	stage.mouseEventsEnabled = true;

Hier verknüpfen wir das PongStage Canvas-Objekt aus der Datei index.html mit der Canvas-Variablen und erstellen dann ein Stage-Objekt aus diesem Canvas. (Auf der Bühne können wir Objekte darauf platzieren.)

Mit mouseEventsEnabled können wir Mausereignisse verwenden, um Mausbewegunge und -klicks zu erkennen.

/* Set The Flash Plugin for browsers that don't support SoundJS */
  	SoundJS.FlashPlugin.BASE_PATH = "assets/";
    if (!SoundJS.checkPlugin(true)) {
      alert("Error!");
      return;
    }

Hier konfigurieren wir, wo sich das Flash-Sound-Plugin für die Browser befindet, in denen HTML5 Audio nicht unterstützt wird

	manifest = [
				{src:"bg.png", id:"bg"},
				{src:"main.png", id:"main"},
				{src:"startB.png", id:"startB"},
				{src:"creditsB.png", id:"creditsB"},
				{src:"credits.png", id:"credits"},
				{src:"paddle.png", id:"cpu"},
				{src:"paddle.png", id:"player"},
				{src:"ball.png", id:"ball"},
				{src:"win.png", id:"win"},
				{src:"lose.png", id:"lose"},
				{src:"playerScore.mp3|playerScore.ogg", id:"playerScore"},
				{src:"enemyScore.mp3|enemyScore.ogg", id:"enemyScore"},
				{src:"hit.mp3|hit.ogg", id:"hit"},
				{src:"wall.mp3|wall.ogg", id:"wall"}
			];

In der Manifestvariablen platzieren wir ein Array von Dateien, die wir laden möchten (und geben für jede eine eindeutige ID an). Jeder Sound hat zwei Formate - MP3 und OGG - da verschiedene Browser mit verschiedenen Formaten (in) kompatibel sind.

  	preloader = new PreloadJS();
  	preloader.installPlugin(SoundJS);
    preloader.onProgress = handleProgress;
    preloader.onComplete = handleComplete;
    preloader.onFileLoad = handleFileLoad;
    preloader.loadManifest(manifest);

Hier konfigurieren wir das Preloader-Objekt mit PreloadJS. PreloadJS ist eine neue Ergänzung zu den CreateJS-Bibliotheken und eine recht nützliche.

Wir erstellen ein neues PreloadJS-Objekt, platzieren es in der preloader-Variablen und weisen dann jedem Ereignis eine Methode zu (onProgress, onComplete, onFileLoad). Schließlich verwenden wir den preloader, um das zuvor erstellte Manifest zu laden.

1	Ticker.setFPS(30);
2	Ticker.addListener(stage);

Hier fügen wir das Ticker-Objekt zur Bühne hinzu und stellen die Bildrate auf 30 FPS ein. Wir werden es später im Spiel für die enterFrame-Funktionalität verwenden.

Schritt 4: Erstellen der Preloader-Funktionen

function handleProgress(event)
{
	//use event.loaded to get the percentage of the loading
}

function handleComplete(event) {
         //triggered when all loading is complete
}

function handleFileLoad(event) {
         //triggered when an individual file completes loading
            
         switch(event.type)
         {
         	case PreloadJS.IMAGE:
         	//image loaded
         	 var img = new Image();
              img.src = event.src;
              img.onload = handleLoadComplete;
              window[event.id] = new Bitmap(img);
         	break;

         	case PreloadJS.SOUND:
         	//sound loaded
         	handleLoadComplete();
         	break;
         }
}

Sehen wir uns die Funktionen an:

handleProgress - In dieser Funktion können Sie den Prozentsatz des Ladevorgangs mithilfe des folgenden Parameters verfolgen: event.loaded. Damit können Sie beispielsweise einen Fortschrittsbalken erstellen.
handleComplete - Diese Funktion wird aufgerufen, sobald alle Dateien geladen wurden (falls Sie dort etwas platzieren möchten).
handleFileLoad - Da wir zwei Arten von Dateien laden - Bilder und Töne - haben wir diese Funktion, die jede einzeln behandelt. Wenn es sich um ein Bild handelt, erstellen wir ein Bitmap-Bild, platzieren es in einer Variablen (deren Name mit der ID des geladenen Bildes übereinstimmt) und rufen dann die Funktion handleLoadComplete auf (die wir als Nächstes schreiben). Wenn es sich um einen Sound handelt, rufen wir sofort handleLoadComplete auf.

Lassen Sie uns nun die soeben erwähnte handleLoadComplete-Funktion diskutieren:

 function handleLoadComplete(event) 
 {

	totalLoaded++;
	
	if(manifest.length==totalLoaded)
	{
		addTitleView();
	}
 }

Es ist eine ziemlich einfache Funktion. Wir erhöhen die Variable totalLoaded (die die Anzahl der bisher geladenen Assets enthält) und prüfen dann, ob die Anzahl der Elemente in unserem Manifest mit der Anzahl der geladenen Assets übereinstimmt. In diesem Fall wechseln wir zum Hauptmenü.

Schritt 5: Erstellen des Hauptmenüs

function addTitleView()
{
	//console.log("Add Title View");
	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();
	
	// Button Listeners
	
	startB.onPress = tweenTitleView;
	creditsB.onPress = showCredits;

Hier ist nichts Besonderes. Wir platzieren die Bilder der Hintergrund-, Start- und Credits-Schaltfläche auf der Bühne und verknüpfen die onPress-Ereignishandler mit den Start- und Credits-Schaltflächen.

Hier sind die Funktionen, mit denen der Credits-Bildschirm und das tweenTitleView, mit dem das Spiel gestartet wird, angezeigt und entfernt werden:

function showCredits()
{
	// Show Credits
		
	credits.x = 480;
		
	stage.addChild(credits);
	stage.update();
	Tween.get(credits).to({x:0}, 300);
	credits.onPress = hideCredits;
}

// Hide Credits

function hideCredits(e)
{
	Tween.get(credits).to({x:480}, 300).call(rmvCredits);
}

// Remove Credits

function rmvCredits()
{
	stage.removeChild(credits);
}

// Tween Title View

function tweenTitleView()
{		
	// Start Game
		
	Tween.get(TitleView).to({y:-320}, 300).call(addGameView);
}

Schritt 6: Der Spielcode

Wir haben den Hauptteil dieses Tutorials erreicht, nämlich den Code des Spiels.

Zunächst müssen wir der Bühne alle erforderlichen Assets hinzufügen, also tun wir dies in der Funktion addGameView:

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.x = 211;
	playerScore.y = 20;
	
	cpuScore = new Text('0', 'bold 20px Arial', '#A3FF24');
	cpuScore.x = 262;
	cpuScore.y = 20;
	
	stage.addChild(playerScore, cpuScore, player, cpu, ball);
	stage.update();
	
	// Start Listener 
	
	bg.onPress = startGame;
}

Wieder eine ziemlich einfache Funktion, die die Objekte auf dem Bildschirm platziert und dem Hintergrundbild ein mouseEvent hinzufügt, so dass das Spiel startet, wenn der Benutzer darauf klickt (wir rufen die Funktion startGame auf).

Sehen wir uns die startGame-Funktion an:

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

Hier, wie Sie sehen können, zusätzlich zum Hinzufügen eines onMouseMove-Ereignisses, das unser Paddel bewegt. Wir fügen das tick-Ereignis hinzu, das die update funktion in jedem Frame aufruft.

Sehen wir uns die Funktionen movePaddle und reset an:

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

/* Reset */

function reset()
{
	ball.x = 240 - 15;
	ball.y = 160 - 15;
	player.y = 160 - 37.5;
	cpu.y = 160 - 37.5;
	
	stage.onMouseMove = null;
	Ticker.removeListener(tkr);
	bg.onPress = startGame;
}

In movePaddle platzieren wir das Paddel des Benutzers grundsätzlich an der y-Koordinate der Maus.

Beim reset machen wir etwas Ähnliches wie addGameView, außer dass wir hier keine grafischen Elemente hinzufügen, da sie bereits auf dem Bildschirm angezeigt werden.

Mit der alert funktion zeigen wir das Gewinn- und Verlust-Popup an:

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 7: Die Spielschleife

Im letzten Teil unseres Tutorials arbeiten wir nun an der update-Funktion (die in jedem Frame des Spiels auftritt - ähnlich wie bei Flashs onEnterFrame):

function update()
{
	// Ball Movement 

	ball.x = ball.x + xSpeed;
	ball.y = ball.y + ySpeed;
	
	// Cpu Movement
	
	if(cpu.y < ball.y) {
		cpu.y = cpu.y + 4;
	}
	else if(cpu.y > ball.y) {
		cpu.y = cpu.y - 4;
	}
	
	// Wall Collision 

	if((ball.y) < 0) { ySpeed = -ySpeed; SoundJS.play('wall'); };//Up
	if((ball.y + (30)) > 320) { ySpeed = -ySpeed; SoundJS.play('wall');};//down
	
	/* 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');
	}
	
	/* 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');
	}
	
	/* Stop Paddle from going out of canvas */
	
	if(player.y >= 249)
	{
		player.y = 249;
	}
	
	/* Check for Win */
	
	if(playerScore.text == '10')
	{
		alert('win');
	}
	
	/* Check for Game Over */
	
	if(cpuScore.text == '10')
	{
		alert('lose');
	}
}

Sieht beängstigend aus, oder? Keine Sorge, wir werden jeden Teil überprüfen und darüber diskutieren.

1	// Ball Movement
2
3	ball.x = ball.x + xSpeed;
4	ball.y = ball.y + ySpeed;

In jedem Frame bewegt sich der Ball gemäß seinen x- und y-Geschwindigkeitswerten

1	// Cpu Movement
2
3	if((cpu.y+32) < (ball.y-14)) {
4	cpu.y = cpu.y + cpuSpeed;
5	}
6	else if((cpu.y+32) > (ball.y+14)) {
7	cpu.y = cpu.y - cpuSpeed;
8	}

Hier haben wir die grundlegende KI des Computers, bei der das Paddel des Computers einfach dem Ball ohne spezielle Logik folgt. Wir vergleichen einfach die Position der Mitte des Paddels (weshalb wir dem CPU-Y-Wert 32 Pixel hinzufügen) mit der Position des Balls mit einem kleinen Versatz und bewegen das Paddel nach Bedarf nach oben oder unten.

if((ball.y) < 0) { //top
	ySpeed = -ySpeed; 
	SoundJS.play('wall'); 
};
if((ball.y + (30)) > 320) { //bottom
	ySpeed = -ySpeed; 
	SoundJS.play('wall');
};

Wenn der Ball den oberen oder unteren Rand des Bildschirms trifft, ändert der Ball die Richtung und wir spielen den Wall Hit-Sound.

 	/* 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');
 	}

Das Anmelden der Punktzahl ist einfach: Wenn der Ball den linken oder rechten Rand überschreitet, erhöht er die Punktzahl des Spielers bzw. der CPU, spielt einen Ton ab und setzt die Position der Objekte mithilfe der zuvor beschriebenen reset funktion zurück.

 
/* 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');
 }

Hier beschäftigen wir uns mit Kollisionen des Balls mit den Paddeln; Jedes Mal, wenn der Ball auf eines der Paddel trifft, ändert der Ball die Richtung und es wird ein Ton gespielt

1	if(player.y >= 249)
2	{
3	player.y = 249;
4	}

Wenn das Paddel des Spielers außerhalb der Grenzen liegt, platzieren wir es wieder innerhalb der Grenzen.

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

In diesem Snippet prüfen wir, ob einer der Punkte des Spielers 10 Punkte erreicht hat, und wenn ja, zeigen wir dem Spieler das Popup mit Gewinn oder Verlust an (entsprechend seinem Gewinnstatus).

Abschluss

Sie haben mit CreateJS ein ganzes Pong-Spiel erstellt. Vielen Dank, dass Sie sich die Zeit genommen haben, dieses Tutorial zu lesen.