Share
Das Web bewegt sich schnell - so schnell, dass unser ursprüngliches EaselJS-Tutorial bereits veraltet ist! In diesem Lernprogramm erfahren Sie, wie Sie die neueste CreateJS-Suite verwenden, indem Sie einen einfachen Pong-Klon erstellen.
Werfen wir einen Blick auf das Endergebnis, auf das wir hinarbeiten:
Anklicken um abzuspielen
Dieses Tutorial basiert auf Carlos Yanez 'Ein Pong-Spiel in HTML5 erstellen mit EaselJS, das wiederum auf seinem Leitfaden Erste Schritte mit EaselJS aufbaut. Die Grafiken und Soundeffekte stammen alle aus dem vorherigen Tutorial.
Accentsconagua
index.html Dies wird unser Haupt sein index.html Datei:
Pong
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 Wesentlichen alle separaten EaselJS-Bibliotheken enthält) müssen wir die JS-Dateien nicht mehr herunterladen und auf unserer Website hosten. Die Dateien befinden sich jetzt in einem CDN (Content Delivery Network), das es uns ermöglicht, diese Dateien so schnell wie möglich aus der Ferne zu laden.
Lassen Sie uns den Code überprüfen:
Diese Zeile entfernt das mobile Highlight, das möglicherweise erscheint, wenn Sie versuchen, das Spiel auf dem Handy zu spielen. (Durch das mobile Hervorheben wird das Leinwandobjekt hervorgehoben und ignoriert so Ihre Fingerbewegungen.)
Als nächstes haben wir das Laden der CreateJS-Bibliotheken:>
Dieser Code lädt die JS-Dateien aus dem CreateJS-CDN und ermöglicht grundsätzlich die Verwendung aller CreateJS-Funktionen in unserem Code
Als Nächstes laden wir das SoundJS Flash-Plugin, das Sound-Unterstützung für Browser bietet, die kein HTML5-Audio unterstützen. Dazu verwenden Sie eine SWF (ein Flash-Objekt), um die Sounds zu laden.
In diesem Fall verwenden wir das CDN nicht. Stattdessen laden wir die SoundJS-Bibliothek von http://createjs.com/#!/SoundJS/download herunter und platzieren die soundjs.flashplugin-0.2.0.min.js und FlashAudioPlugin.swf Dateien in einem lokalen Ordner mit dem Namen Vermögenswerte.
Als letzte der JS-Dateien laden wir die Main.js Datei, die den gesamten Code zu unserem Spiel enthält:
Zum Schluss platzieren wir ein Canvas-Objekt auf unserer Bühne.
Jetzt können wir mit dem Spielcode arbeiten.
Unser Spielcode befindet sich in einer Datei namens Main.js, so erstellen und speichern Sie das jetzt.
Zunächst definieren wir Variablen für alle Grafikobjekte im Spiel:
var Leinwand; // Wird in unserer index.html-Seite mit der Leinwand verlinkt. Var stage; // Entspricht der Stufe in AS3; wir werden "Kinder" hinzufügen // Graphics // [Background] var bg; // Die Hintergrundgrafik // [Titelansicht] var main; // Der Haupthintergrund var startB; // Die Start-Schaltfläche im Hauptmenü var creditsB; // Die Credits-Schaltfläche im Hauptmenü // [Credits] var credits; // Der Bildschirm mit den Credits // [Spielansicht] var player; // Die Spielerpaddelgrafik var ball; // Die Ballgrafik var cpu; // Das CPU-Paddel var win; // Das gewinnende Popup-Var verlieren; // Das verlierende Popup
Ich habe für jede Variable einen Kommentar hinzugefügt, damit Sie wissen, was in dieser Variablen geladen wird
Als nächstes die Ergebnisse:
// [Score] var playerScore; // Die Hauptpunktzahl des Spielers var cpuScore; // Die CPU-Bewertung var cpuSpeed = 6; // Die Geschwindigkeit des CPU-Paddels; Je schneller es ist, desto schwieriger ist das Spiel
Wir brauchen Variablen für die Geschwindigkeit des Balls:
// Variablen var xSpeed = 5; var ySpeed = 5;
Sie können diese Werte beliebig ändern, wenn Sie das Spiel einfacher oder schwerer machen möchten.
Wenn Sie ein Flash-Entwickler sind, wissen Sie, dass Flashs onEnterFrame ist sehr nützlich beim Erstellen von Spielen, da es in jedem Frame etwas zu tun gibt. (Wenn Sie mit dieser Idee nicht vertraut sind, lesen Sie diesen Artikel in der Game-Schleife.)
Wir haben ein Äquivalent für onEnterFrame in CreateJS, und das ist das Ticker Objekt, das jeden Sekundenbruchteil Code ausführen kann. Lassen Sie uns die Variable erstellen, die mit ihr verknüpft wird:
var tkr = neues Objekt;
Als nächstes haben wir den Preloader, der die neuen PreloadJS-Methoden verwenden wird.
// preloader var preloader; var Manifest; var totalLoaded = 0;
Preloader - enthält das PreloadJS-Objekt.Manifest - enthält die Liste der Dateien, die wir laden müssen.totalLoaded - Diese Variable enthält die Anzahl der bereits geladenen Dateien.Nicht zuletzt in unserer Liste der Variablen haben wir TitleView, die mehrere Grafiken enthält, um sie zusammen anzuzeigen (wie ein Flash DisplayObjectContainer).
var TitleView = neuer Container ();
Gehen wir weiter zur Main-Funktion…
Diese Funktion ist die erste Funktion, die nach allen JS-Dateien von der ausgeführt wird index.html sind geladen Aber wie nennt man diese Funktion??
Nun, erinnere dich an diese Zeile aus dem index.html Datei?
Dieses Code-Snippet gibt an, dass nach dem Laden der HTML-Bibliothek (und der JS-Bibliotheken) die Main Funktion sollte laufen.
Lassen Sie uns es überprüfen:
function Main () / * Link Canvas * / canvas = document.getElementById ('PongStage'); Bühne = neue Bühne (Leinwand); stage.mouseEventsEnabled = true; / * Setze das Flash-Plugin für Browser, die SoundJS nicht unterstützen * / SoundJS.FlashPlugin.BASE_PATH = "assets /"; if (! SoundJS.checkPlugin (true)) alert ("Fehler!"); Rückkehr; 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:
canvas = document.getElementById ('PongStage'); Bühne = neue Bühne (Leinwand); stage.mouseEventsEnabled = true; Hier verlinken wir die PongStage Leinwandobjekt aus der index.html Datei an die Zeichenbereichsvariable an, und erstellen Sie dann ein Bühnenobjekt aus diesem Zeichenbereich. (Auf der Bühne können wir Objekte darauf platzieren.)
mouseEventsEnabled ermöglicht die Verwendung von Mausereignissen, sodass Bewegungen und Klicks der Maus erkannt werden können.
/ * Setze das Flash-Plugin für Browser, die SoundJS nicht unterstützen * / SoundJS.FlashPlugin.BASE_PATH = "assets /"; if (! SoundJS.checkPlugin (true)) alert ("Fehler!"); Rückkehr; 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 Manifest-Variable wird ein Array von Dateien eingefügt, die wir laden möchten (und für jede eine eindeutige ID angeben). Jeder Sound hat zwei Formate - MP3 und OGG -, da verschiedene Browser mit unterschiedlichen 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 recht nützlich.
Wir erstellen ein neues PreloadJS-Objekt und platzieren es im Preloader Variablen, dann weisen Sie jedem Ereignis eine Methode zu (In Arbeit, onComplete, onFileLoad). Zum Schluss benutzen wir die Preloader um das zuvor erstellte Manifest zu laden.
Ticker.setFPS (30); Ticker.addListener (stage);
Hier fügen wir das Ticker-Objekt zur Bühne hinzu und setzen die Framerate auf 30 FPS; Wir werden es später im Spiel für die verwenden enterFrame Funktionalität.
function handleProgress (event) // use event.loaded zum Abrufen des Prozentsatzes des Ladevorgangs function handleComplete (event) // wird ausgelöst, wenn das Laden abgeschlossen ist function handleFileLoad (event) // wird ausgelöst, wenn das Laden einer einzelnen Datei abgeschlossen ist switch (event.type) case PreloadJS.IMAGE: // Bild geladen var img = new Image (); img.src = event.src; img.onload = handleLoadComplete; window [event.id] = neue Bitmap (img); brechen; case PreloadJS.SOUND: // geladener Sound handleLoadComplete (); brechen;
Sehen wir uns die Funktionen an:
handleProgress - In dieser Funktion können Sie den Prozentsatz des Ladevorgangs anhand dieses Parameters verfolgen: event.loaded. Sie können damit beispielsweise eine Fortschrittsleiste erstellen.handleComplete - Diese Funktion wird aufgerufen, sobald alle Dateien geladen wurden (falls Sie dort etwas ablegen möchten)..handleFileLoad - Da wir zwei Arten von Dateien laden - Bilder und Sounds -, haben wir diese Funktion, die jede separat behandelt. Wenn es sich um ein Bild handelt, erstellen wir ein Bitmap - Bild und platzieren es in einer Variablen (deren Name mit der ID des geladenen Bildes übereinstimmt). Anschließend rufen Sie die handleLoadComplete Funktion (die wir als nächstes schreiben werden); Wenn es ein Ton ist, dann rufen wir einfach die handleLoadComplete sofort.Lass uns jetzt über das diskutieren handleLoadComplete Funktion, die ich gerade erwähnte:
function handleLoadComplete (event) totalLoaded ++; if (manifest.length == totalLoaded) addTitleView ();
Es ist eine ziemlich unkomplizierte Funktion. wir erhöhen die totalLoaded Variable (die die Anzahl der bisher geladenen Assets enthält), und dann prüfen wir, ob die Anzahl der Elemente in unserem Manifest der Anzahl der geladenen Assets entspricht. Wenn dies der Fall ist, gehen Sie zum Hauptmenü.
function addTitleView () //console.log("Titelansicht hinzufügen "); 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; Nichts Besonderes hier. Wir platzieren die Bilder des Hintergrunds, der Start-Schaltfläche und der Credits-Schaltfläche auf der Bühne und verknüpfen onPress Event-Handler zu den Schaltflächen Start und Credits.
Hier sind die Funktionen, die den Bildschirm für Gutschriften und das Fenster anzeigen und entfernen tweenTitleView was das Spiel startet:
Funktion showCredits () // Credits anzeigen credits.x = 480; stage.addChild (credits); stage.update (); Tween.get (credits) .to (x: 0, 300); credits.onPress = hideCredits; // Hide Credits-Funktion hideCredits (e) Tween.get (credits) .to (x: 480, 300) .call (rmvCredits); // Credits entfernen function rmvCredits () stage.removeChild (credits); // Tween-Titelansicht-Funktion tweenTitleView () // Spiel starten Tween.get (TitleView) .to (y: -320, 300) .call (addGameView);
Wir haben den Hauptteil dieses Tutorials erreicht, nämlich den Code des Spiels.
Zunächst müssen wir alle erforderlichen Elemente auf der Bühne hinzufügen, also tun wir das in der addGameView Funktion:
function addGameView () // Bildschirm "Destroy Menu & Credits" stage.removeChild (TitleView); TitleView = null; Kredite = Null; // Spielansicht hinzufügen player.x = 2; player.y = 160 - 37,5; cpu.x = 480 - 25; cpu.y = 160 - 37,5; Kugel x = 240 - 15; ball.y = 160 - 15; // Score playerScore = neuer Text ('0', 'fett 20px Arial', '# A3FF24'); playerScore.x = 211; playerScore.y = 20; cpuScore = neuer Text ('0', 'fett 20px Arial', '# A3FF24'); cpuScore.x = 262; cpuScore.y = 20; stage.addChild (playerScore, cpuScore, Spieler, cpu, Ball); stage.update (); // Listener starten bg.onPress = startGame; Wieder eine recht unkomplizierte Funktion, die die Objekte auf dem Bildschirm platziert und dem Hintergrundbild ein mouseEvent hinzufügt. Wenn der Benutzer darauf klickt, startet das Spiel (wir nennen das Spiel beginnen Funktion).
Lassen Sie uns das überprüfen Spiel beginnen Funktion:
Funktion startGame (e) bg.onPress = null; stage.onMouseMove = movePaddle; Ticker.addListener (tkr, false); tkr.tick = Update;
Hier sehen Sie, wie Sie sehen, zusätzlich eine onMouseMove Ereignis, das unser Paddel bewegen wird. Wir fügen das hinzu Tick Ereignis, das die anrufen wird aktualisieren Funktion in jedem Frame.
Lassen Sie uns das überprüfen movePaddle und zurücksetzen Funktionen:
function movePaddle (e) // Mausbewegung player.y = e.stageY; / * Reset * / Funktion 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;
Im movePaddle, Wir positionieren das Paddel des Benutzers grundsätzlich an der Y-Koordinate der Maus.
Im zurücksetzen, Wir machen etwas Ähnliches addGameView, außer hier fügen wir keine grafischen Elemente hinzu, da diese bereits auf dem Bildschirm angezeigt werden.
Verwendung der warnen Funktion zeigen wir das gewinnende und verlierende Popup an:
Funktionsalarm (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 (verlieren); Tween.get (verlieren) .to (y: 115, 300);
Nun, für den letzten Teil unseres Tutorials arbeiten wir am aktualisieren Funktion (die in jedem Frame des Spiels auftritt - ähnlich wie bei Flashs) onEnterFrame):
function update () // Kugelbewegung ball.x = Kugel.x + xSpeed; ball.y = ball.y + ySpeed; // Cpu-Bewegung if (cpu.y < ball.y) cpu.y = cpu.y + 4; else if(cpu.y > ball.y) cpu.y = cpu.y - 4; // Wandkollision 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-Kollision * / 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> = spieler.y && ball.y < player.y + 75) xSpeed *= -1; SoundJS.play('hit'); /* Stop Paddle from going out of canvas */ if(player.y >= 249) Spieler.y = 249; / * Check for Win * / if (playerScore.text == '10') alert ('win'); / * Auf Game Over prüfen * / if (cpuScore.text == '10') alert ('lose'); Sieht unheimlich aus, nicht wahr? Keine Sorge, wir werden jeden Teil überprüfen und besprechen.
// Ballbewegung ball.x = Ball.x + xSpeed; ball.y = ball.y + ySpeed;
In jedem Frame bewegt sich der Ball entsprechend seinen x- und y-Geschwindigkeitswerten
// CPU-Bewegung if ((cpu.y + 32) < (ball.y-14)) cpu.y = cpu.y + cpuSpeed; else if((cpu.y+32) > (ball.y + 14)) cpu.y = cpu.y - cpuSpeed;
Hier haben wir die grundlegende KI des Computers, in der das Paddel des Computers ohne besondere Logik dem Ball folgt. Wir vergleichen nur die Position des Paddelzentrums (weshalb wir dem CPU-Y-Wert 32 Pixel hinzufügen) mit einem kleinen Versatz mit der Position des Balls und verschieben das Paddel je 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 ('Wand'); ; Wenn der Ball den oberen Rand oder den unteren Rand des Bildschirms trifft, ändert der Ball seine 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'); Der Score-Login ist einfach: Wenn der Ball die linken oder rechten Grenzen passiert, erhöht er die Punktzahl des Players bzw. der CPU, gibt einen Sound aus und setzt die Position der Objekte mit Hilfe von zurück zurücksetzen Funktion, die wir zuvor besprochen haben.
/ * CPU-Kollision * / 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> = spieler.y && ball.y < player.y + 75) xSpeed *= -1; SoundJS.play('hit'); Hier geht es um Kollisionen des Balls mit den Paddeln; Jedes Mal, wenn der Ball eines der Paddel berührt, ändert der Ball seine Richtung und es wird ein Ton gespielt
if (player.y> = 249) player.y = 249;
Wenn das Paddel des Spielers die Grenzen überschreitet, setzen wir es wieder in die Grenzen.
/ * Check for Win * / if (playerScore.text == '10') alert ('win'); / * Auf Game Over prüfen * / if (cpuScore.text == '10') alert ('lose'); In diesem Snippet prüfen wir, ob einer der Punkte des Spielers 10 Punkte erreicht hat. Wenn dies der Fall ist, zeigen wir dem Spieler das gewinnende oder verloren gegangene Popup-Fenster an (je nach Gewinnstatus)..
Das ist es, Sie haben mit CreateJS ein ganzes Pong-Spiel erstellt. Vielen Dank, dass Sie sich die Zeit genommen haben, dieses Tutorial zu lesen.
