Wie man Schwerkraft zu Ihrem HTML5-Spiel hinzufügt - Dummies

Schwerkraftberechnungen waren von Anfang an ein Bestandteil von HTML5-Videospielen. Es gibt zwei Arten von Schwerkraft, die berücksichtigt werden müssen. In plattformartigen Spielen ist der Spieler einem Planeten nahe und alle Schwerkraft scheint alles gerade nach unten zu ziehen.

Wenn Sie wissen, wie man Beschleunigungsvektoren hinzufügt, ist es einfach, mit der Schwerkraft auf der Plattform zu arbeiten. Denken Sie an die Schwerkraft als eine konstante Kraft, die immer einen kleinen Betrag in jedem Frame herunterzieht.

So fügen Sie Raketen zu Ihrem Spiel hinzu

Dieses Beispiel hat eine weitere interessante Funktion. Wenn Sie den Aufwärtspfeil drücken, wird das Fahrzeugbild in ein anderes Bild mit Flammen umgewandelt.

Der Code für das Beispiel hoverCar wird hier in seiner Gesamtheit angezeigt:

hoverCar. html var Auto; var Stadt; var Spiel; Funktion Car () {tCar = neues Sprite (Spiel, "hoverCar. png", 70, 50); tCar. setSpeed ​​(0); tCar. hSpeed ​​= 0 tCar. checkKeys = Funktion () {tCar. changeImage ("hoverCar.png"); if (keysDown [K_LEFT]) { dies. hSpeed ​​- = 1 } if (keysDown [K_RIGHT]) { dies. hSpeed ​​+ = 1 } if (keysDown [K_UP]) { dies. addVector (0,.5); dies. changeImage ("hoverCarThrust.png") ;} dies. changeXby (dies. hSpeed); } // end checkKeys tCar. checkGravity = function () { if (dies. y> 580) { dies. setPosition (dies. x, 580); } else { dies. addVector (180,. 1); } // end if } // end checkGravity Rückgabe von tCar;} // end car def Funktion init () {game = new Scene (); Auto = neues Auto (); Stadt = neue Sprite (Spiel, "Stadt. Png", 800, 600); Stadt. setSpeed ​​(0); Stadt. setPosition (400, 300); Spiel. start ();} // end init Funktion update () {Spiel. klar(); Stadt. aktualisieren(); Auto. checkKeys (); Auto. checkGravity (); Auto. update ();} // end update

Wie benutzt man den Kraftvektor in deinem Spiel

Die Schwerkraft ist eigentlich ziemlich unkompliziert. Es ist einfach ein Kraftvektor. Die anderen interessanten Teile dieses Beispiels umfassen das Ändern der horizontalen Bewegung, ohne den Bildwinkel des Autos zu ändern, und das Bild einzustellen, um das Triebwerk anzuzeigen. Hier sind die Schritte:

1. Erstellen Sie zwei verschiedene Bilder.

   Verwenden Sie Ihren Bildeditor, um zwei verschiedene Versionen des Bildes zu erstellen.

2. Baue ein gewöhnliches Sprite.

   Wie die meisten Fahrzeug-Sprites benötigen Sie eine checkKeys () -Methode. Dieses ist auf gewöhnliche Weise aufgebaut, aber das Verhalten ist etwas anders.

3. Stellen Sie das Bild auf die Standardeinstellung ein.

   Das Standardbild hat keine Triebwerke. Verwenden Sie die changeImage () - Methode, um dies zum Standardbild zu machen. Wenn die Triebwerke eingeschaltet sind, wird das Bild geändert.

4. Verwenden Sie eine Variable, um die horizontale Geschwindigkeit zu steuern.

   Sie können die Variable hSpeed ​​erstellen, um die horizontale Geschwindigkeit des Fahrzeugs zu verwalten.

5. Stellen Sie den linken und rechten Pfeil ein, um hSpeed ​​zu ändern.

   Die linke und rechte Pfeiltaste ändern die Variable hSpeed.

6. Verwenden Sie changeXby, um die horizontale Geschwindigkeit einzustellen.

   Ändern Sie nach der Überprüfung aller Schlüssel den x-Wert des Fahrzeugs auf den aktuellen Wert von hSpeed.

7. Der Aufwärtspfeil fügt einen Vektor nach oben hinzu.

   Verwenden Sie die nun berüchtigte addVector () - Funktion, um einen kleinen Kraftvektor nach oben hinzuzufügen, wenn der Benutzer den Aufwärtspfeil drückt. Denken Sie daran, dass 0 Grad abgelaufen ist. Spielen Sie mit diesem Wert herum, um den gewünschten Schub für Ihr Spiel zu erhalten.

8. Zeigen Sie die Triebwerke an, wenn der Aufwärtspfeil gedrückt wird.

   Wenn der Benutzer den Aufwärtspfeil drückt, müssen Sie die Triebwerke anzeigen. Verwenden Sie die changeImage () -Methode, um das Sprite-Image auf dasjenige mit Raketen-Triebwerken einzustellen.

9. Erstellen Sie eine checkGravity () -Methode.

   Diese Methode wird bei jedem Frame aufgerufen, um die Schwerkraft auszugleichen.

10. Überprüfen Sie, ob Sie vor Ort sind.

    In diesem Beispiel ist der Boden als y-Wert größer als 580 definiert.

11. Wenn Sie nicht am Boden sind, fügen Sie einen Gravitationskraftvektor hinzu.

    Da es sich ansammeln wird, muss der Gravitationskraftvektor ziemlich klein sein. Sie müssen die Kraft der Schwerkraft und der Triebwerke ausbalancieren, um das gewünschte Verhalten zu erzielen. Wenn die Schwerkraft zu stark ist, funktionieren die Triebwerke nicht. Wenn die Triebwerke zu stark sind, fliegt das Auto einfach in den Weltraum.