Share
In diesem Lernprogramm erstellen wir einen Klon des klassischen Spiels Pong in HTML5 mithilfe der EaselJS-Bibliothek. Das Spiel wird mehrere Bildschirme, Soundeffekte und einen (sehr einfachen) KI-Gegner haben.
Mit vorgefertigten Grafiken werden wir ein unterhaltsames Programm erstellen Pong Spiel in HTML5 mit der EaselJS-Bibliothek, die eine Flash-ähnliche Oberfläche für die HTML5-Zeichenfläche bietet. Eine Einführung zu 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.
Es wird eine einfache Schnittstelle mit neo-futuristischem Stil verwendet. Dies umfasst mehrere Formen, Schaltflächen, Bitmaps und mehr.
Die für dieses Lernprogramm erforderlichen Grafiken finden Sie im beigefügten Download.
Die EaselJS-Bibliothek wird zum Erstellen unseres Spiels verwendet. Stellen Sie sicher, dass Sie das lesen Fertig machen Tutorial, wenn Sie neu in dieser Bibliothek sind.
Sie können die neueste Version von EaselJS von der offiziellen Website herunterladen. Dies ist jedoch möglicherweise mit dem hier beschriebenen Code nicht kompatibel. Ich empfehle daher, die Version der Bibliothek zu verwenden, die im Quellendownload enthalten ist.
Lassen Sie uns unser HTML-Dokument vorbereiten. Wir fangen mit den Grundlagen an, nur eine Barebones-Gliederung:
Pong
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. Andernfalls würde das mobile Erlebnis drastisch abnehmen.
Pong
Der folgende Code fügt die erforderlichen Javascript-Bibliotheken hinzu, damit unsere App funktionieren kann.
Pong /
Neben EaselJS werden auch TweenJS (für die Bearbeitung von Bildschirmübergängen und die Spielschleife) und SoundJS (für die Soundeffekte) verwendet..
Main.js ist die Datei, die wir verwenden, um unseren eigenen JS-Code zu speichern.
In den nächsten Zeilen nennen wir unsere Main() Funktion. Dies ist die Funktion, mit der unsere Anwendung gestartet wird. Es wird später in diesem Tutorial erstellt Main.js.
Pong
In dieser Zeile wird eine HTML5-Zeichenfläche erstellt. Wir weisen ihm eine ID zu, damit wir später darauf verweisen können und auch Breite und Höhe festlegen können.
Pong
Beginnen wir mit der Erstellung des Spiels!
Öffnen Sie Ihren bevorzugten JavaScript-Editor (jeder Texteditor funktioniert, aber Sie haben keine Syntax-Hervorhebung). Bereiten Sie das Schreiben des Codes vor. Denken Sie daran, die Datei als zu speichern Main.js in Ihrem Projektordner.
Wir beginnen mit der Definition aller Grafik- und Logikvariablen.
Die nächsten Variablen repräsentieren das HTML-Canvas-Element und die Bühne, auf die es verweist. Das Bühne Die Variable verhält sich ähnlich wie die AS3-Stufe.
/ * Leinwand definieren * / var Leinwand; var Stufe;
Diese Variable speichert das Titelhintergrundbild.
/ * Hintergrund * / var bgImg = neues Bild (); var bg;
Dies ist die Titelansicht, der erste interaktive Bildschirm, der in unserem Spiel erscheint. Diese Variablen speichern ihre Komponenten.
/ * Titelansicht * / var mainImg = neues Bild (); var main; var startBImg = neues Bild (); var startB; var creditsBImg = neues Bild (); var creditsB; var TitleView = neuer Container ();
In dieser Ansicht werden die Credits, das Jahr und das Urheberrecht des Spiels angezeigt. Diese Variablen werden zum Speichern verwendet.
/ * Credits * / var creditsViewImg = neues Bild (); var credits;
Die nächsten Variablen speichern die einzelnen Grafiken, die in der Spielansicht angezeigt werden:
/ * Game View * / var playerImg = neues Bild (); var Spieler; var ballImg = neues Bild (); var Kugel; var cpuImg = neues Bild (); var cpu; var winImg = neues Bild (); var win; var loseImg = neues Bild (); var verlieren;
Die Score-Werte werden von den nächsten Variablen verarbeitet:
/ * Score * / var playerScore; var cpuScore;
Dies sind die Variablen, die wir verwenden werden. Lesen Sie die Kommentare im Code, um zu verstehen, für was sie gedacht sind:
var xSpeed = 5; // Horizontale Geschwindigkeit des Balls var ySpeed = 5; // vertikale Geschwindigkeit des Balls var gfxLoaded = 0; // verwendet als Preloader, zählt die bereits geladenen Elemente var tkr = new Object; // wird als Ereignis-Listener für den Ticker verwendet
Wir werden Soundeffekte verwenden, um das Spielgefühl zu verbessern. Die Sounds in diesem Beispiel wurden mit dem ausgezeichneten kostenlosen Tool as3sfxr erstellt und mit Audacity in MP3 konvertiert.
Die benötigten Sounds finden Sie alle im Quelldownload. Wenn Sie Ihre eigenen erstellen möchten, benötigen Sie vier:
Accentsconagua
hit.mp3: Wird gespielt, wenn der Ball ein Paddel trifftplayerScore.mp3: gespielt, wenn der Spieler Punkte erzieltenemyScore.mp3: gespielt, wenn der Feind punktetwall.mp3: Wird gespielt, wenn der Ball die obere oder untere Grenze erreichtDas Main() Funktion wird die erste sein, die ausgeführt wird, wenn die Webseite geladen wird, da auf sie verwiesen wird onload Attribut des HTML-Dokuments (siehe Schritt 7).
Es werden die notwendigen Funktionen aufgerufen, um das Spiel zu starten.
Funktion Main () // Code…
Dieser Code ruft die HTML-Zeichenbereichs-ID ab und verknüpft sie mit der EaselJS Stage-Klasse. Dadurch wird die Stage-Variable wie die Stage-Klasse in AS3. Fügen Sie dies zu Main().
/ * Link Canvas * / canvas = document.getElementById ('Pong'); Bühne = neue Bühne (Leinwand); 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().
stage.mouseEventsEnabled = true;
Wir werden SoundJS verwenden, um Sounds zu unserem Spiel hinzuzufügen. Schreiben Sie den folgenden Code, um die verwendeten Sounds zu importieren. Fügen Sie dies zu Main().
/ * Sound * / SoundJS.addBatch ([Name: 'hit', src: 'hit.mp3', Instanzen: 1, Name: 'playerScore', src: 'playerScore.mp3', Instanzen: 1, Name: 'enemyScore', src: 'enemyScore.mp3', Instanzen: 1, Name: 'wall', src: 'wall.mp3', Instanzen: 1]));
Dieser Code wird verwendet, um die Grafiken mithilfe einer Funktion, die wir später schreiben werden, vorab zu laden. Die zuvor erstellten Image-Objekte werden so festgelegt, dass sie auf die entsprechenden PNG-Quelldateien in unserem Dokumentordner verweisen.
Jeder wird mit einem Namen versehen, sodass wir feststellen können, welches Bild später geladen wird. Schließlich wird die Funktion aufgerufen, die die geladenen Bilder verarbeitet.
Fügen Sie dies zu Main().
/ * GFX laden * / 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 = 'Spieler'; 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 = 'verlieren'; loseImg.onload = loadGfx;
Die Ticker-Klasse stellt in einem festgelegten Intervall eine zentralisierte Tick- oder Heartbeat-Übertragung bereit. Dies kann verwendet werden, um die Spielschleife auszulösen.
Der folgende Code setzt die Framerate auf 30 und definiert die Bühne als Listener für die Ticks.
Die TweenJS-Klasse hört auf dieses Häkchen, um die Animationen auszuführen. Fügen Sie dies zu Main().
/ * Ticker * / Ticker.setFPS (30); Ticker.addListener (stage);
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.
Funktion loadGfx (e) if (e.target.name = 'bg') bg = neues Bitmap (bgImg); if (e.target.name = 'main') main = neues Bitmap (mainImg); if (e.target.name = 'startB') startB = neues Bitmap (startBImg); if (e.target.name = 'creditsB') creditsB = neues Bitmap (creditsBImg); if (e.target. name = 'credits') credits = neue Bitmap (creditsViewImg); if (e.target.name = 'player') player = neue Bitmap (playerImg); if (e.target.name = 'ball') ball = neue Bitmap (ballImg); if (e.target.name = 'cpu') cpu = neue Bitmap (cpuImg); if (e.target.name = 'win') win = neue Bitmap ( winImg); if (e.target.name = 'lose') lose = neues Bitmap (loseImg); gfxLoaded ++; if (gfxLoaded == 10) // Denken Sie daran, dies zu ändern, wenn Sie weitere Bilder hinzufügen addTitleView ();
Wenn alle Grafiken geladen sind, wird die Titelansicht mit der folgenden 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 ();
Diese Funktion fügt die erforderlichen Listener hinzu TitleView Knöpfe (ist Teil von addTitleView ()):
startB.onPress = addGameView; creditsB.onPress = showCredits;
Das Credits Der Bildschirm wird angezeigt, wenn der Benutzer auf die Credits-Schaltfläche klickt. Ein Maus-Listener wird zum vollständigen Bild hinzugefügt, um es zu entfernen.
Funktion showCredits () // Credits anzeigen credits.x = 480; stage.addChild (credits); stage.update (); Tween.get (credits) .to (x: 0, 300); credits.onPress = hideCredits;
Wenn der Credits Der Bildschirm wird angeklickt, er wird zurückgeblendet und von der Bühne entfernt.
// Hide Credits-Funktion hideCredits (e) Tween.get (credits) .to (x: 480, 300) .call (rmvCredits); // Credits entfernen function rmvCredits () stage.removeChild (credits);
Lasst uns hier aufhören, um zu testen, was wir bisher gemacht 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 also aus irgendeinem Grund Ihre Datei diese nicht nachahmt, vergleichen Sie Ihre Quelle mit meiner, um zu sehen, was das verursachen könnte.
Die folgenden Zeilen entfernen das TitleView von der Bühne und fügt die GameView Gegenstände auf die Bühne. Ein Maus-Listener wird zum Hintergrund hinzugefügt, um das Spiel zu starten, wenn Sie darauf klicken.
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.maxWidth = 1000; // Fix für Chrome 17 playerScore.x = 211; playerScore.y = 20; cpuScore = neuer Text ('0', 'fett 20px Arial', '# A3FF24'); cpuScore.maxWidth = 1000; // Fix für Chrome 17 cpuScore.x = 262; cpuScore.y = 20; stage.addChild (playerScore, cpuScore, Spieler, cpu, Ball); stage.update (); // Listener starten bg.onPress = startGame; Der Spieler bewegt sich mit der vertikalen Position der Maus:
function movePaddle (e) // Mausbewegung player.y = e.stageY;
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 Erstellung des Tickers: Dies entspricht einem Timer-Ereignis in AS3.
Funktion startGame (e) bg.onPress = null; stage.onMouseMove = movePaddle; Ticker.addListener (tkr, false); tkr.tick = Update;
Wenn ein Punkt (vom Spieler oder vom Computer) erzielt wird, kehren die Paddel und der Ball zu ihren ursprünglichen Positionen zurück und das Spiel wird unterbrochen:
Funktion reset () Ball.x = 240 - 15; ball.y = 160 - 15; player.y = 160 - 37,5; cpu.y = 160 - 37,5; stage.onMouseMove = null; // Hör nicht auf die Maus zu hören Ticker.removeListener (tkr); // pausiere das Spiel bg.onPress = startGame;
Wenn das Spiel nicht pausiert ist, wird der Ball mit den zuvor erstellten Variablen für jeden Frame verschoben.
function update () // Kugelbewegung ball.x = Kugel.x + xSpeed; ball.y = ball.y + ySpeed;
Dieser Code steuert die Bewegung des Computers. Das Paddel wird so bewegt, dass es dem Ball folgt und dabei noch einen gewissen Fehler aufweist.
if (cpu.y < ball.y) cpu.y = cpu.y + 2.5; else if(cpu.y > ball.y) cpu.y = cpu.y - 2,5;
Hier überprüfen wir, ob sich der Ball am oberen oder unteren Rand der Leinwand befindet. Ist dies der Fall, wird die vertikale Geschwindigkeit umgekehrt und ein Ton wird abgespielt.
if ((ball.y) < 0) ySpeed = -ySpeed; SoundJS.play('wall');;//Up if((ball.y + (30)) > 320) ySpeed = -ySpeed; SoundJS.play ('wall');; // down Nun die linke und rechte Seite. Dieser Code ändert auch die Punktzahl, ruft die Reset-Funktion auf und gibt je nach der Seite, die der Ball berührt, ein anderes Geräusch ab.
/ * 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 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 überschneiden, kommt es zu einer Kollision, also kehren wir die x-Geschwindigkeit des Balls um und spielen einen Ton.
/ * 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'); Sie können die Endebedingung in den nächsten Zeilen ändern. Die Standardeinstellung ist 10 Punkte.
/ * Check for Win * / if (playerScore.text == '10') alert ('win'); / * Auf Game Over prüfen * / if (cpuScore.text == '10') alert ('lose'); Diese Funktion stoppt das Spiel und zeigt eine Warnmeldung an, deren Inhalt vom Ergebnis des Spiels abhängt.
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);
Speichern Sie Ihre Arbeit (falls nicht) und öffnen Sie die HTML-Datei im Browser, damit Ihr Spiel funktioniert!
Versuchen Sie, die Variablen des Spiels zu ändern, um Ihre eigene Version des Spiels zu erstellen!
Ich hoffe, Ihnen hat dieses Tutorial gefallen, vielen Dank für das Lesen!
