So erstellen Sie eine Lunar Lander in Ihr HTML5 Spiel

Dies ist eines der ältesten Spielarten. Die Grundidee ist die Landung auf einem Planeten ohne Atmosphäre für HTML5-Spiel zu replizieren. Die Apollo-Astronauten hatten eine begrenzte Menge an Kraftstoff, einen sich schnell bewegenden Raumschiff zu verlangsamen und es sicher an die Oberfläche zu bringen. Dieses Spiel ist eine Variation dieses Themas.

bild0.jpg

Das Wesen eines Mondlander Spiel ist das Zusammenspiel zwischen Schub und Schwerkraft. Das Spiel stützt sich stark auf die addVector () Verfahren. Gravity verleiht einen kleinen Schub nach unten bei jedem Rahmen, der durch Schub aus den Pfeiltasten entgegengewirkt werden kann.

Das Spiel verfügt über vier verschiedene Landers Bilder (Feedback zu geben, dass der Benutzer Schub bewirbt), die mit dem einfach ausgetauscht werden setImage () Verfahren nach Bedarf.

Spiel Kollisionen

Der interessanteste Teil dieses Spiels ist die Landung Routine. Die ordentliche Kollision Routine ist nicht spezifisch genug, um diese Art der Kollision zu handhaben, da die Landung nur eine sichere Landung in Betracht gezogen werden, wenn eine Reihe von Bedingungen erfüllt sind. Der sauberste Weg für mehrere Bedingungen zu überprüfen, ist in einem tief verschachtelt ob Struktur, wie die folgenden:

 tLander.checkLanding = function () {if (this.falling) {if (this.y> 525) {if (this.x lt; platform.x + 10) {if (this.x> platform.x - 10) {if (this.dx lt; 0,2) {if (this.dx> ± 2) {if (this.dy lt; 2) {this.setSpeed ​​(0) -this.falling = false-message = "Nice Landing" -} else {message = "zu viel vertikale Geschwindigkeit" -} // end if} else {message = "zu schnell links "-} // end if} else {message =" zu schnell nach rechts "-} // end if} // end 'x zu groß' if} // end 'x zu klein' if} // end ' y nicht groß genug 'if} // end' fallen wir? ' if} // end checkLanding

Wenn Sie für mehrere Bedingungen auf einmal überprüfen, dann ist es am besten, einen separaten erstellen ob Erklärung für jeden. Platzieren Sie jede ob Anweisung innerhalb der nächsten, so dass die am tiefsten verschachtelten Teil des Codes darstellt Erfolg.

  1. Bestimmen Sie, wenn Sie fallen.

    Eine Boolesche Variable genannt rückläufig wurde geschaffen, dass das Raumschiff fällt oder gelandet beschreibt, ob. Ob rückläufig wahr ist, wird die Schwerkraft ausgeschaltet. Es macht nur Sinn für eine Landung Zustand zu überprüfen, ob Sie gerade zu fallen.

  2. Überprüfen Sie den Y-Wert.

    Da die Plattform auf einem Y-Wert von 550 gesetzt wird, wird der Lander erscheinen zu landen, wenn seine Y-Wert größer als 525. ist bist du wirklich nur mit dem Boden des Landers ging es um die Oberseite der Plattform zu berühren. Beachten Sie, dass diese Überprüfung innerhalb der geschieht rückläufig prüfen. Wenn eine Bedingung ausfällt, ist es nicht notwendig, die anderen zu überprüfen.

  3. Überprüfen Sie den X-Wert.

    Sie werden das Zentrum des Landers wollen innerhalb von zehn Pixeln der Mitte der Plattform zu sein, so ein Paar von verschachtelten verwenden ob Aussagen, die die X-Stellen zu überprüfen.

  4. Überprüfen Sie horizontale Geschwindigkeit.

    Für eine sichere Landung muss das Handwerk haben eine dx Wert zwischen -0,2 und 0,2. (Dies ist etwas willkürlich, aber beim Testen, fühlt es richtig.) Dies wird am besten mit einem Paar von verschachtelten geprüft ob Aussagen.

  5. Überprüfen Sie die vertikale Geschwindigkeit.

    Wenn alles andere gut funktioniert, überprüfen Sie, dass das Handwerk nicht zu schnell absinkt. Verwenden Sie die dy Eigenschaft, um zu bestimmen, wie schnell das Raumschiff fällt.

  6. Feedback mit sonst Klauseln.

    Eine tief verschachtelte Struktur wie folgt zeigt Ihnen den realen Wert der richtige Vertiefung und zu kommentieren. Feedback in den verschiedenen sonst Klauseln zu erklären, warum die Landung ein Fehler angesehen wurde.

Spiel Textkonsolen

Ein weiterer interessanter Teil des Codes ist der Mechanismus Textdaten an den Benutzer für die Anzeige. Der einfachste Weg, dies zu tun ist durch eine einfache HTML div. Verwenden Sie CSS zu platzieren die div genau dort, wo Sie wollen, es zu sein. Sie sollten nur selten die absolute Positionierung im normalen Web-Entwicklung verwendet werden, macht es Sinn, im Rahmen eines Etiketts für ein Spiel zu schaffen.

Beachten Sie, dass Sie das einstellen müssen möglicherweise z-index Eigenschaft auf einem hohen Wert zu gewährleisten, ist es über der Leinwand erscheint, oder es kann für den Benutzer nicht sichtbar sein. Hier ist die CSS, die das Etikett wie auf dem Bildschirm ausgegeben aussehen lässt:

 #stats {position: absolute-font-family: Monospace-left: 50px; top: 50px; z-index: 999-color: weiß-}

Möglichkeiten, um Ihr Spiel zu verbessern

Dies ist nur ein Ausgangspunkt für das Spiel. Viele weitere interessante Features hinzugefügt werden könnten:

  • Treibstoff: Fügen Sie eine Kraftstoff-Variable, die jedes Mal verringert wird der Benutzer Schub gilt. Vertikale Schub sollte mehr Kraftstoff als horizontale Anpassungen verwenden. Wenn der Kraftstoffstand unter Null wird, ignorieren weiteren Schub-Eingänge. Dieser Mechanismus stellt eine realistische Komplikation in das Spiel.

  • Einschalten: Fügen Sie einige andere Funktionen der Benutzer zu verdienen: Bonus Kraftstoff, weniger intensive Schwerkraft, eine breitere Plattform.

  • Mehrere Landungen: Bewegen Sie den Landeplatz nach einer erfolgreichen Landung Vielleicht, oder hat der Benutzer ein Objekt zu einer zweiten Plattform tragen.

  • Hindernisse: Setzen Sie Weltraumschrott oder Gebäude in der Weise, dass der Spieler auf Kontakt abstürzen.

  • Ändern Sie das Thema: Die gleiche Mechanik leicht für einen Hubschrauber oder Heißluftballon Spiel verwendet werden.

Ähnliche

Menü