So erstellen Sie eine E-Mail-Pilot in Ihr HTML5 Spiel

Dies ist eine Art eines Scroll-Racer Spiel, das Sie in Ihrem HTML5 verwenden können. Diese Art von Spiel ist ein Grundnahrungsmittel der Videospiel-Universum schon lange, weil es so viele interessante Variationen sein kann.

In diesem speziellen Iteration, du bist ein Pilot ein Flugzeug über einem Inselarchipel fliegen. Ihre Aufgabe ist es über die Inseln und vermeiden die Wolken zu fliegen. Das Spiel bietet eine einfache Kontrolle über die X-Position des Flugzeugs und einer endlos Scrollen Welt.

• Identifizieren Sie die wichtigsten Variablen: In diesem Spiel sind die wichtigsten Variablen das Flugzeug, die Inseln und die Wolken. Alle sind Sprite-Objekte implementiert.

• Erstellen Sie jedes Objekt in Isolation: Identifizieren Sie, was jedes Objekt tun sollten, und implementieren diese grundlegenden Funktionen.

• Erstellen eines einzigen Element- dann wandelt es in ein Array: Das Wolken Objekt ist wirklich ein Array. Es ist sehr üblich Arrays von Objekten zu haben. Der Schlüssel ist, ein einzelnes Element zu bauen zuerst das tut, was Sie wollen, und dann das Objekt in ein Array umwandeln.

  Normalerweise, wenn Sie dies tun, werden Sie zwei benutzerdefinierte Funktionen bauen. Die erste Funktion erstellt das Array und verwendet ein für loop jedes Objekt in dem Array zu initialisieren. Die zweite Funktion hat auch eine für Schleife, die durch jedes Objekt die Schritte, eine seiner Event-Funktionen aufrufen und jedes Objekt der Aktualisierung auf dem Bildschirm.

• Verwalten Sie Interaktionen: Die meisten der interessanten Dinge, die in einem Arcade-Spiel passieren auftreten, wenn Objekte kollidieren, so Kollision Routinen sind ein wichtiger Bestandteil der Spielentwicklung.

Wie ein "endlos" Spiel Hintergrund zu bauen

Ein interessantes Merkmal dieses Spiels ist der endlose gekachelten Hintergrund. Der Benutzer Avatar bewegt sich nicht vorwärts überhaupt. Stattdessen kommt die Illusion von Bewegung aus einem Hintergrund mit, die ständig nach unten bewegt, macht es so aussehen wie das Flugzeug nach oben bewegt.

Natürlich ist es unmöglich, eine wirklich endlos Hintergrund zu schaffen, aber man kann ein paar Tricks, eine glaubwürdige Illusion zu erzeugen:

1. Bauen Sie ein Sprite für den Hintergrund.

   Der einfachste Weg, um den sich bewegenden Hintergrund Verhalten zu bekommen, ist einfach der Hintergrund machen eine sehr große Sprite.

2. Erstellen Sie ein Bild größer ist als die Szene.

   Da diese besondere Grafik Kachel vertikal gemeint ist, hat sie die Breite der Szene (800px), aber viel größer als die Szene (1440px hoch für eine 600px hoch Szene) gemacht worden. Größere Größen führen zu weniger offensichtliche Wiederholung wird aber ressourcenintensiv sein. Wenn Sie das horizontale Scrollen möchten, stellen Sie Ihr Bild größer auf der X-Achse ist als die Szene.

3. Duplizieren Sie die oben und unten.

   Der Schlüssel zu einer "endlosen" Scrolling-Effekt ist es, die oben und unten (oder nach links und rechts von einer horizontalen Bild) identisch zueinander zu haben. Verwenden Sie das Kopieren und Einfügen Tool Ihrer Grafikpaket mit dem Klonen und Verschmieren Werkzeuge, um diese Wirkung zu erzielen.

4. Überschreiben Sie die Checkbounds Funktion.

   Die Hintergrund-Sprites müssen benutzerdefinierte Randverhalten, also die Sprites überschreiben Checkbounds Verfahren.

5. Überprüfen Sie den Hintergrund sicher sein, nie auf den Bildschirm verlässt.

   In dem Mail-Pilot Beispiel beginnt das Sprite weit über der Szene und bewegt sich nach unten. Mit einigen Tests (und die console.log () Befehl) Der Hintergrund beginnt die Szene an einem Y-Wert von 720. Verwenden Sie ein zu verlassen ob Aussage zu überprüfen, wenn das passiert.

6. Bewegen Sie den Hintergrund, so dass der gleiche Abschnitt zeigt.

   Die Oberseite und Unterseite der Ozean gif die gleichen sind, so dass, wenn das Meer ist über die Szene zu verlassen, kann der Benutzer die Spitze der großen Sehen Ozean gif. Ändern Sie den Y-Wert, damit der Anwender nun die gleichen Boden derselben .GIF zu sehen, und halten Sie es bewegen. Unter Umständen müssen Sie verwenden console.log () und einige Tests, um es zu arbeiten, wie Sie wollen.

Hier ist der Code für die Checkbounds () Verfahren, so dass Sie es in Aktion sehen können. Beachten Sie, dass Sie müssen werden die spezifischen Werte ändern Sie Ihre Bildgröße anzupassen.

 tOcean.checkBounds = function () {// nahtlose Ozean gif repeatsif (this.y> 720) {this.setPosition (400, -120)} // end if} // end Checkbounds

Verbessern Sie Ihr Spiel Top-Down-Racer

Diese Art von Spiel ist sehr beliebt, weil es einfach zu schreiben und kann in einer Reihe von einfachen Art und Weise modifiziert werden, um viele verschiedene Arten von Spielen zu bekommen. Hier sind ein paar Vorschläge:

• Fügen Sie einen Scoring-Mechanismus. Die offensichtlichste Verbesserung ist eine Art von Scoring-System hinzuzufügen. Auszeichnung Punkte für die Inseln zu berühren und nehmen das Leben für Wolken zu berühren.

• Bauen Sie den Schwierigkeitsgrad auf. Betrachten mehr Wolken Hinzufügen, Ändern der Größe der verschiedenen Elemente oder die Geschwindigkeit ändert.

• In Powerups. Powerups sind einfache Sprites, die irgendeine Art von Vorteil oder Nachteil liefern, wenn sie (in der Regel durch Erschießen oder Laufen über das Powerup) aktiviert sind. Die Optionen sind fast grenzenlos, aber hier sind ein paar Starter Ideen: Vorübergehendes erlauben sowohl vertikale als auch horizontale Bewegung, um die Geschwindigkeit zu ändern, und die Ebene größer oder kleiner zu machen.

• Ändern Sie die Bewegung. Im Moment bewegt sich das Flugzeug nur auf der horizontalen Achse. Zulassen von Bewegung auf der vertikalen Achse wird auch dramatisch das Gameplay verändern.

• In Waffen. Hinzufügen von Aufzählungszeichen für eine interessante Wendung. Wenn Sie eine Menge von Kugeln wollen, müssen Sie ein Array zu erstellen.

• Wechseln Sie in das horizontale Scrollen. Sie können ganz einfach auf den horizontalen Bildlauf wechseln. Sie können auch in beiden Achsen Blättern erlauben, aber Sie werden wirklich durch die Grenzkontrolle Aspekte denken müssen.