En el tutorial de hoy, vamos a empezar con la primera parte para realizar un juego fenomenal en JavaScript. Osten Post es una de las muestras de que este Programmiersprache es sumamente vérsatil, fácil de aprender, y te ayudará a simplificar muchos aspectos de tu código. Así que, sin mas que decir ¡Comencemos!
Schritt 1: Erste Schritte mit einem animierten Hintergrund
Ich wollte unbedingt ein Tutorial über eine Spieletechnologie schreiben, die ich gerne benutze, also hier ist es. In dieser Geschichte werden wir anfangen, ein kleines Spiel daraus zu machen erschieße sie mit PixiJS, eine sehr einfache und coole Javascript-Bibliothek.
Was wir genau tun werden, ist ein Raumschiff zu machen, das sich bewegen und schießen kann, feindliche Wellen hereinkommen und einen wunderschönen animierten Hintergrund mit sich bewegenden Wolken. Der erste Teil (dieser, den Sie jetzt lesen) konzentriert sich auf den Hintergrund.
Wie man anfängt?
Beginnen wir mit dem Start unseres Projekts: Ich habe eine bereits etablierte Codestruktur hochgeladen, sodass wir alle auf derselben Basis arbeiten. Wenn Sie es jedoch selbst tun möchten, lege ich ein Foto aus meinem Ordner unten ab:
Klicken Sie hier, um Ihren Ordner herunterzuladen
Necesitaremos un Server local para ejecutar el juego: Te invito a descargar WAMP si estás trabajando con Windows, o MAMP para macOS, son gratuitos y fáciles de usar. Vamos a poner tu carpeta de juegos en el servidor (htdocs for MAMP / www for WAMP) y teclear el Verknüpfung localhost en tu Browser favorito (para mí sería: http://localhost:8888/Spaceship/bin/)
Im Index.htmlimportieren wir die Header-Javascript-Dateien:
<script src="../src/lib/pixi.min.js"></script> <script src="“../src/main.js”"></script>
… Und wir müssen für jede Datei, die wir erstellen, dasselbe tun. Als nächstes folgt die Pixi-Initialisierung (die auf der WebGL-Rendering-Engine basiert):
var renderer = PIXI.autoDetectRenderer (window.innerWidth, window.innerHeight);
In diesem Tutorial weisen wir das Spiel an, das gesamte Browserfenster abzudecken. Wenn Sie es jetzt ausprobieren, erhalten Sie einen vollständig schwarzen Hintergrund.
In der Datei main.js beginnt das ganze Spiel. Es ist wie bei einem Manager mit der ersten Ausführungsfunktion des Spiels und der Schleife, in der wir dem Spiel mitteilen können, was in jedem Frame zu tun ist. Was wir wollen, ist ein blauer Hintergrund für den Himmel, wenn das Spiel beginnt, also lasst uns das aktualisieren Init-Funktion:
Funktion init () {renderer.backgroundColor = 0x22A7F0; renderer.render (Bühne); loop (); }}
Pixi verwendet das Hex-Farbformat, daher müssen Sie Ihren Farbcode mit dem vorangestellten 0x schreiben. Speichern und sehen wir das Ergebnis in Ihrem Browser!
Wolken überall!
Dieser Hintergrund ist sehr langweilig. Fügen wir einige schwebende Wolken hinzu.
Fügen wir zunächst eine neue Klassendatei hinzu CloudManager im Ordner src (wodurch die Wolken erzeugt und bewegt werden).
Klasse CloudManager {Konstruktor () {} Update () {}}
Vergessen Sie nicht, es der Datei hinzuzufügen index.html Wie haben wir das gemacht? main.js:
<script src="../src/lib/pixi.min.js"></script> <script src="../src/CloudManager.js"></script> <script src="../src/main.js"></script>
Der Konstruktor ist der Einstiegspunkt dieser Klasse, an dem wir die hinzufügen können Spawn-Funktion für unsere Wolken. Was wir wollen, ist im Grunde eine Methode, mit der jeweils eine Cloud erstellt werden kann X. Sekunden, und es ist perfekt, weil es dafür eine Javascript-Sache gibt:
window.setInterval (function () {}, 1000);
Dieser im Konstruktor platzierte Code ruft alle 1000 Millisekunden (= 1 Sekunde) auf, was sich in den Spielklammern befindet.
Fügen wir Cloud-Sprites zum Assets-Ordner hinzu, und am besten haben wir 2 verschiedene Bilder: (Die Clouds sind weiß mit einem transparenten Hintergrund, sodass sie auf dieser Seite unsichtbar waren, aber hier sind die Links auf GitHub:
Wir müssen die Sprites laden, bevor das Spiel beginntFügen Sie sie also in die Funktion ein Pixi.loader.add:
PIXI.loader.add (["Assets / Cloud_1.png", "Assets / Cloud_2.png"]). Load (init);
Ok, jetzt können wir die Wolken in der Methode zeigen setInterval von CloudManager:
window.setInterval (function () {const sprite = (Math.random ()> 0,5? "cloud_1": "cloud_2"); this.cloud = new PIXI.Sprite (PIXI.loader.resources ["assets /" + sprite + ".png"]. Textur); this.cloud.anchor.set (0.5, 0.5); this.cloud.position.set (renderer.width * 1.2, renderer.height * Math.random ()); stage. addChild (this.cloud);}, 1000);
So setzen Sie diesen Code fort:
- Zuerst berechnen wir eine Zufallszahl zwischen 0 und 1, und entweder ist sie kleiner als 0,5, also speichern wir das erste Sprite in einer Konstanten oder es ist das zweite.
- Anschließend erstellen wir ein neues Sprite-Objekt mit dem Bild, das wir in der vorherigen Zeile erhalten haben.
- Der Ursprungspunkt dieses Sprites wird seine obere linke Ecke sein, also setzen wir seinen Ankerpunkt in die Mitte.
- Wir müssen die Wolke über den rechten Bildschirmrand hinaus anzeigen, damit sie sich über den Bildschirm nach links bewegen kann: renderer.width * 1.2 ist die Position des linken Randes + die Breite des Bildschirms + 20% seiner Breite. Wir können sicher sein, dass wir nicht sehen werden, wie es laicht. Für die Position und renderer.height * Math.random () ist eine Zahl zwischen 0 und die Höhe des Fensters. Daher befindet sich die vertikale Position der Wolke zwischen dem oberen und unteren Rand des Bildschirms.
- Zuletzt fügen wir diese Wolke der Szene hinzu.
Wenn Sie diesen Code ausführen, sollte nichts angezeigt werden, und dies ist absichtlich so, weil sie aus der Ansicht verschwinden müssen. Jetzt müssen wir sie bewegen.
Die Update-Funktion ist der richtige Ort dafür. Aber wir müssen die Wolken in einem speichern Array in der Lage sein, ihre Positionen zu iterieren und festzulegen. Initialisieren wir ein neues Array in der Erbauer von CloudManager:
this.cloudsList = [];
... und schiebt die Wolken nach dem stage.addChild-Funktion:
this.cloudsList.push (this.cloud);
Jetzt können wir das Update-Array iterieren und die Position jeder Cloud festlegen:
this.cloudsList.forEach (Funktion (Element) {element.position.x - = 4;});
Jetzt sollte es funktionieren!
Oh warte, etwas sollte uns stören: Wohin gehen all diese Wolken?
Sí, si no los eliminamos después de que salieron de la pantalla, seguirán existiendo y puede causar algunos problemas de rendimiento. Añadamos una declaración de forEach para cada uno de ellos que los borre cuando su posición horizontal Sein un poco inferior al borde izquierdo de la pantalla (así que no podemos verlos saliendo):
if (element.position.x <-renderer.width * 0.3) {element.destroy (); array.splice (0, 1); }}
Wir sind fertig mit den Wolken!
Wie wäre es mit einer zufälligen Variation der Wolkengröße? Fügen Sie dies dem Cloud-Baustein hinzu:
sei minScale = 0,2; sei maxScale = 1.2; let scale = Math.random () * (maxScale - minScale) + minScale; this.cloud.scale.set (scale, scale);
Wenn etwas in Ihrem Code fehlt oder nicht funktioniert, können Sie dies überprüfen Ergebnis hier.
Fahren Sie nun mit dem nächsten Teil fort, um unser erstes Spiel in JavaScript zu beenden. Weitermachen!
