Share
Letztes Jahr habe ich Ihnen gezeigt, wie Sie mit Flash und AS3 ein Ballerspiel erstellen können. Mit zunehmender Beliebtheit (und Funktionen) von HTML5 möchten wir uns ansehen, wie HTML5, JavaScript und EaselJS das Gleiche tun.
Werfen wir einen Blick auf das Endergebnis, auf das wir hinarbeiten:
Klicken Sie hier, um die Demo zu spielen.
Mit vorgefertigten Sprites werden wir ein unterhaltsames Programm erstellen Weltraum-Shooter Spiel in HTML5 mit der EaselJS-Bibliothek.
Der Spieler kann ein Raumschiff steuern und mehrere Feinde schießen, während er im Weltraum unterwegs ist.
Es wird eine einfache und futuristische Schnittstelle verwendet, dazu gehören Bitmaps und mehr. Ich habe in der Demo dieses Tutorials eine großartige Sprite-Bibliothek verwendet, die Teil der kostenlosen Sinistar-Klongrafik ist.
Die für dieses Lernprogramm erforderlichen Schnittstellenressourcen 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 EaselJS von der offiziellen Website herunterladen.
Lassen Sie uns unser HTML-Dokument vorbereiten, es ist eine einfache HTML-Struktur, um mit dem Schreiben unserer App zu beginnen. Speichern Sie dies als Shooter.html.
Schütze
Fügen wir noch ein wenig CSS hinzu. Diese Zeile entfernt die Standardhervorhebung, wenn Sie mit einem mobilen Browser auf ein Element tippen. Andernfalls würde das mobile Erlebnis drastisch abnehmen.
Schütze
Mit dem folgenden Code werden die erforderlichen JavaScript-Bibliotheken hinzugefügt, damit unsere App funktionieren kann.
Schütze
Main.js In dieser Datei werden alle unsere eigenen Funktionen für das Spiel gespeichert. Erstellen Sie es jetzt und speichern Sie es im selben Ordner wie Shooter.html. Sie müssen auch die aufgeführten EaselJS-Bibliotheken herunterladen.
In den nächsten Zeilen nennen wir unsere Hauptfunktion; Dies ist die Funktion, mit der unsere Anwendung gestartet wird. Sie wird später in unserem JavaScript-Code erstellt.
Schütze
Der Canvas wird in diese Zeile eingefügt. Wir weisen eine ID zu, um sie später zu referenzieren, und legen deren Breite und Höhe fest.
Schütze
Beginnen wir mit der Erstellung des Spiels!
Öffnen Sie Ihren bevorzugten JavaScript-Editor (jeder Texteditor wird funktionieren, aber Sie haben keine Syntax-Hervorhebung). Bereiten Sie sich darauf vor, Ihr fantastisches Spiel zu schreiben. Öffne das Main.js Datei, die Sie zuvor erstellt haben.
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 Variable verhält sich ähnlich wie die Bühne in einem AS3 Flash-Projekt.)
/ * Leinwand definieren * / var Leinwand; var Stufe;
Die nächsten Variablen speichern die Hintergrundbilder. Zwei gekachelte Bilder werden verwendet, um einen unendlich scrollenden Hintergrund zu erstellen.
/ * Hintergrund * / var bgImg = neues Bild (); var bg; var bg2Img = neues Bild (); var bg2;
Dies ist das Schiff, das als Spielercharakter oder Held verwendet wird.
/ * Ship * / var sImg = neues Bild (); var Schiff;
Mehrere Feinde werden auf der Bühne sein; Sie werden dies als Quellgrafik verwenden.
/ * Feind * / var eImg = neues Bild ();
Ein Boss ist im Spiel anwesend, größer und mit mehr Gesundheit als die anderen Feinde. Diese Variablen werden verwendet, um es zu instanziieren.
/ * Boss * / var bImg = neues Bild (); var Chef;
Das Symbol "Leben". Zu Beginn gibt es drei Leben, und Sie verlieren eines, wenn Sie von einem Feind getroffen werden.
/ * Lives * / var lImg = neues Bild ();
Dies ist deine Waffe: feuere Kugeln auf die Feinde, um sie zu töten. Diese Variable speichert das Quellbild.
/ * Bullets * / var bltImg = neues Bild ();
Im Spiel werden zwei Alarme verwendet, eine für den Gewinn und eine für den Verlust. Wie Sie einen Gewinn oder Verlust ermitteln, erfahren Sie später in diesem Tutorial.
/ * Alert * / var winImg = neues Bild (); var loseImg = neues Bild (); var win; var verlieren;
Dies sind die Variablen, die wir verwenden. Lesen Sie die Kommentare im Code, um mehr darüber zu erfahren. Einige ihrer Namen sind selbsterklärend und haben daher keine Kommentare.
var Leben = neuer Container (); // speichert die Leben gfx var bullets = new Container (); // speichert die Aufzählungszeichen gfx var enemies = new Container (); // speichert die Feinde gfx var bossHealth = 20; var score; var gfxLoaded = 0; // als Preloader verwendet, zählt die bereits geladenen Elemente var centerX = 160; var centerY = 240; var tkr = neues Objekt (); // als Ticker-Listener verwendet var timerSource; // verweist auf eine setInterval-Methode
Wir werden Soundeffekte verwenden, um das Spielgefühl zu verbessern. Sie finden die in diesem Beispiel verwendeten Sounds auf Soungle.com mithilfe der Schlüsselwörter Platz, Explosion und Laser-.
Das 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 ruft die notwendigen Funktionen auf, um das Spiel zu starten. Wir werden diese Funktionen in den nächsten Schritten erstellen - alles von Schritt 19 bis Schritt 23 sollte in diese Funktion einfließen.
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.
Accentsconagua
/ * Link Canvas * / canvas = document.getElementById ('Shooter'); 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.
stage.mouseEventsEnabled = true;
Wir werden SoundJS verwenden, um Sounds zu unserem Spiel hinzuzufügen. SoundJS addBatch Die Methode verwendet für jeden Aufruf ein Array von drei Parametern:
Name: Der Name der Instanz, die der Sound haben soll - dies wird später für die Wiedergabe des Sounds verwendet.src: Die URL der Sounddatei.Instanzen: Die Anzahl der Instanzen, die gleichzeitig abgespielt werden können./ * Sound * / SoundJS.addBatch ([name: 'boss', src: 'boss.mp3', instanzen: 1, name: 'explo', src: 'explo.mp3', instanzen: 10, Name: 'shot', src: 'shot.mp3', Instanzen: 10]);
Dieser Code wird verwendet, um die Grafiken mithilfe einer Funktion, die wir später schreiben werden, vorab zu laden. Es zeigt jedes zuvor erstellte Image-Objekt auf die PNG-Quelldatei in unserem Dokumentordner. Es wird ein Name gegeben, um festzustellen, welches Bild geladen ist, und schließlich wird die Funktion aufgerufen, die die geladenen Bilder verarbeitet.
/ * GFX laden * / bgImg.src = 'bg.png'; bgImg.name = 'bg'; bgImg.onload = loadGfx; bg2Img.src = 'bg2.png'; bg2Img.name = 'bg2'; bg2Img.onload = loadGfx; sImg.src = 'ship.png'; sImg.name = 'Schiff'; sImg.onload = loadGfx; eImg.src = 'enemy1.png'; eImg.name = 'Feind'; eImg.onload = loadGfx; bImg.src = 'boss.png'; bImg.name = 'Chef'; bImg.onload = loadGfx; lImg.src = 'live.png'; lImg.name = 'live'; lImg.onload = loadGfx; bltImg.src = 'bullet.png'; bltImg.name = 'bullet'; bltImg.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 bietet einen zentralisierten "Tick", der in einem festgelegten Intervall gesendet wird. Wir können es benutzen Tick() Funktion, um bestimmten Code in regelmäßigen Abständen auszuführen.
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.
/ * Ticker * / Ticker.setFPS (30); Ticker.addListener (stage);
Jedes Mal, wenn eine Grafik geladen wird, wird diese Funktion ausgeführt. Jedes Bild wird einem Bitmap-Objekt zugewiesen und vor dem Aufruf überprüft, ob alle Elemente geladen sind addGameView.
Funktion loadGfx (e) if (e.target.name = 'bg') bg = neue Bitmap (bgImg); if (e.target.name = 'bg2') bg2 = neue Bitmap (bg2Img); if (e.target.name = 'ship') ship = new Bitmap (sImg); gfxLoaded ++; if (gfxLoaded == 9) addGameView ();
Wenn alle Grafiken geladen sind addGameView Funktion wird aufgerufen. Diese Funktion fügt das Schiff, den Lebenszeitzähler, die Punktzahl und die Hintergründe der Bühne hinzu.
function addGameView () ship.x = centerX - 18.5; ship.y = 480 + 34; / * Leben hinzufügen * / für (var i = 0; i < 3; i++) var l = new Bitmap(lImg); l.x = 248 + (25 * i); l.y = 463; lives.addChild(l); stage.update(); /* Score Text */ score = new Text('0', 'bold 14px Courier New', '#FFFFFF'); score.maxWidth = 1000; //fix for Chrome 17 score.x = 2; score.y = 476; /* Second Background */ bg2.y = -480; /* Add gfx to stage and Tween Ship */ stage.addChild(bg, bg2, ship, enemies, bullets, lives, score); Tween.get(ship).to(y:425, 1000).call(startGame); Das Schiff des Spielers wird mit der Maus gesteuert und wir verwenden diese Funktion, um das zu handhaben:
Funktion moveShip (e) ship.x = e.stageX - 18.5;
e.stageX bezieht sich auf die x-Koordinate der Maus und diese Funktion wird bei jeder Bewegung der Maus aufgerufen.
Unser Schiff kann Kugeln abschießen, um es zu zerstören und sich vor Feinden zu schützen. Diese Funktion wird jedes Mal ausgeführt, wenn der Benutzer auf die Bühne klickt, und eine Kugel wird vor dem Schiff platziert, die später von der Station verschoben wird aktualisieren() Funktion. Es spielt auch ein Schießgeräusch.
Funktion shoot () var b = neue Bitmap (bltImg); b.x = Schiff.x + 13; b.y = ship.y - 20; bullets.addChild (b); stage.update (); SoundJS.play ('shot'); Es wäre kein Schütze ohne etwas zum Schießen. Hier ein setInterval () wird verwendet, um alle 1000 Millisekunden einen Feind zu erstellen (Sie können diesen Wert im nächsten Schritt ändern), der später vom verschoben wird aktualisieren() Funktion.
function addEnemy () var e = neues Bitmap (eImg); e.x = Math.floor (Math.random () * (320 - 50)) e.y = -50 Feinde.addChild (e); stage.update ();
Diese Zeilen fügen der Bühne und dem Timer die erforderlichen Zuhörer hinzu. Dazu gehören Mausereignisse, zeitgesteuerte Ereignisse (über setInterval) und Ticker-Events, die das Spiel bei jedem Frame aktualisieren.
function startGame () stage.onMouseMove = moveShip; bg.onPress = schießen; bg2.onPress = schießen; Ticker.addListener (tkr, false); tkr.tick = Update; timerSource = setInterval ('addEnemy ()', 1000); Der Hintergrund wird bei jedem Frame verschoben, um die Raumfahrt zu simulieren. Wenn das untere Hintergrund-Sprite die Bühnengrenze erreicht, wird es wieder nach oben verschoben, wodurch eine Endlosschleife entsteht.
Funktionsaktualisierung () / * Hintergrund verschieben * / bg.y + = 5; bg2.y + = 5; if (bg.y> = 480) bg.y = -480; else if (bg2.y> = 480) bg2.y = -480;
Die nächsten Codezeilen prüfen, ob sich Aufzählungszeichen befinden. Wenn ja, werden die Kugeln nach oben bewegt.
/ * Move Bullets * / for (var i = 0; i < bullets.children.length; i++) bullets.children[i].y -= 10;
Fügen Sie einige Zeilen hinzu, um die Position des Aufzählungszeichens zu ermitteln, und verwenden Sie diese Option, um ein Geschoss zu zerstören, wenn es nicht mehr sichtbar ist.
/ * Move Bullets * / for (var i = 0; i < bullets.children.length; i++) bullets.children[i].y -= 10; /* Remove Offstage Bullets */ if(bullets.children[i].y < - 20) bullets.removeChildAt(i);
Wir werden dem Spiel einen großen bösen Boss hinzufügen. Wenn der Benutzer eine bestimmte Punktzahl erreicht, wird der Chef angezeigt:
/ * Boss anzeigen * / if (parseInt (score.text)> = 500 && boss == null) boss = neues Bitmap (bImg); SoundJS.play ("Chef"); boss.x = centerX - 90; boss.y = -183; stage.addChild (Chef); Tween.get (Boss) .to (y: 40, 2000) // Tween den Boss auf die Spielfläche Die Feinde werden ebenso wie die Kugeln bei jedem Bild bewegt. Dieser Code findet alle Gegner auf der Bühne mithilfe von Feinde Container und bewegt sie jeweils um 5 Pixel nach unten.
/ * Bewegt Feinde * / für (var j = 0; j < enemies.children.length; j++) enemies.children[j].y += 5;
Wir überprüfen auch die Positionen der Feinde, um sie zu zerstören, wenn sie nicht mehr sichtbar sind.
/ * Bewegt Feinde * / für (var j = 0; j < enemies.children.length; j++) enemies.children[j].y += 5; /* Remove Offstage Enemies */ if(enemies.children[j].y > 480 + 50) Feinde.RemoveChildAt (j);
Die Kugeln im Container werden auf Kollision mit den Feinden getestet. In diesem Fall werden beide von der Bühne entfernt, ein Sound wird abgespielt und die Partitur wird aktualisiert.
für (var k = 0; k < bullets.children.length; k++) /* Bullet - Enemy Collision */ if(bullets.children[k].x >= enemies.children [j] .x && bullets.children [k] .x + 11 < enemies.children[j].x + 49 && bullets.children[k].y < enemies.children[j].y + 40) bullets.removeChildAt(k); enemies.removeChildAt(j); stage.update(); SoundJS.play('explo'); score.text = parseFloat(score.text + 50); Der folgende Code behandelt die Bosskollisionen. Er verwendet die gleiche Methode, die in der Bullet-Feind-Kollisionsschleife verwendet wird. Hier benutzen wir die ChefGesundheit Variable, um zu bestimmen, wann der Boss besiegt ist.
/ * Bullet - Boss Collision * / if (Boss! = Null && bullets.children [k] .x> = boss.x && bullets.children [k] .x + 11 < boss.x + 183 && bullets.children[k].y < boss.y + 162) bullets.removeChildAt(k); bossHealth--; stage.update(); SoundJS.play('explo'); score.text = parseInt(score.text + 50); Hier prüfen wir, ob ein Feind mit dem Schiff des Spielers kollidiert. Wenn dies der Fall ist, wird ein Ton abgespielt, ein Leben entfernt und das Schiff animiert.
/ * Ship - Feindliche Kollision * / if (enemies.hitTest (ship.x, ship.y) || enemies.hitTest (ship.x + 37, ship.y)) enemies.removeChildAt (j); lives.removeChildAt (lives.length); ship.y = 480 + 34; Tween.get (ship) .to (y: 425, 500) SoundJS.play ('explo'); Der Spieler gewinnt, wenn der Chef all seine Gesundheit verliert und verliert, wenn alle eigenen Leben verloren gehen. Die nächsten Zeilen erkennen diese Situationen und rufen eine Alarmfunktion mit dem richtigen Parameter auf.
/ * Check for win * / if (boss! = Null && bossHealth <= 0) alert('win'); /* Check for lose */ if(lives.children.length <= 0) alert('lose'); Der Alarm zeigt dem Spieler Informationen zum Status des Spiels an. Es wird angezeigt, wenn ein Spielereignis erreicht ist. Es entfernt die Spieler des Spiels und zeigt die entsprechende Nachricht an.
Funktionsalarm (e) / * Listeners entfernen * / stage.onMouseMove = null; bg.onPress = null; bg2.onPress = null; Ticker.removeListener (tkr); tkr = null; timerSource = null; / * Richtige Nachricht anzeigen * / if (e == 'win') win = new Bitmap (winImg); win.x = centerX - 64; win.y = centerY - 23; stage.addChild (win); stage.removeChild (Feinde, Boss); else lose = neues Bitmap (loseImg); lose.x = centerX - 64; verlieren.y = centerY - 23; stage.addChild (verlieren); stage.removeChild (Feinde, Schiff); bg.onPress = function () window.location.reload ();; bg2.onPress = function () window.location.reload ();; stage.update ();
Speichern Sie Ihre Arbeit (falls nicht) und öffnen Sie die HTML-Datei im Browser, damit Ihr HTML5-Spiel funktioniert!
Sie haben gelernt, wie man ein Weltraum-Shooter-Spiel mit all seinen grundlegenden Funktionen erstellt. Versuchen Sie, es mit dem zu erweitern, was Sie bereits kennen. Ein guter Anfang wäre, die Feinde oder den Boss auf den Spieler zurückschießen zu lassen.
Ich hoffe, Ihnen hat dieses Tutorial gefallen, vielen Dank für das Lesen!
