Wie Sie realistische Bewegung zu Ihrem HTML5-Spiel hinzufügen - dummies

Schauen Sie sich den Raum an. html. Dieses einfache Spiel ist ein gutes Beispiel für die Anwendung realistischer Bewegungen auf Ihr HTML5-Spiel. Es verwendet das Steuerschema, das in den klassischen Spielen Asteroiden und Spacewar berühmt wurde. (Obwohl Asteroiden besser bekannt ist, ist Spacewar! bei weitem das frühere und einflussreichste Spiel.)

Klicken Sie hier um die volle Erfahrung zu erhalten.

Wie man einen Kraftvektor zum Spielobjekt hinzufügt

Das Schiff wird mit den Pfeiltasten gesteuert, aber Newtons Effekt ist leichter im Raum zu sehen als auf dem Boden (keine lästigen Zugkräfte, die in die Quere kommen). Die linken und rechten Pfeiltasten drehen das Schiff, aber sie beeinflussen die Schiffsbewegung nicht. Der Aufwärtspfeil feuert eine Rakete ab, die einen Kraftvektor in der Richtung hinzufügt, in der sich das Schiff gerade befindet.

Hier ist der Code:

space var ship; var Spiel; Funktion Ship () {tShip = neues Sprite (Spiel, "Schiff. Png", 25, 25); tSchiff. setSpeed ​​(3); tSchiff. checkKeys = function () {if (keysDown [K_LEFT]) { dies. changeImgAngleBy (-5); } if (keysDown [K_RIGHT]) { dies. changeImgAngleBy (5); } if (keysDown [K_UP]) { dies. addVector (this. getImgAngle (),. 1); }} // end function return tShip;} // Objektdefinitionsfunktion init () {game = new Scene (); Schiff = neues Schiff (); Spiel. setBG ("schwarz"); Spiel. start ();} // end init Funktion update () {Spiel. klar(); Schiff. checkKeys (); Schiff. update ();} // end update

Wie man Raum in deinem Spiel simuliert

Hier ist der Überblick:

1. Beginnen Sie das Beispiel ganz normal.

   Wie die meisten simpleGame-Demos, beginnen Sie mit einem Sprite und einer Szene. Da das Schiff über eine benutzerdefinierte Methode verfügt, wird es zu einem eindeutigen Objekt.

2. Geben Sie dem Schiff eine checkKeys () -Methode.

   Die checkKeys () -Methode sucht nach Tastatureingaben und ändert das Verhalten des Schiffs entsprechend.

3. Ändern Sie den Bildwinkel.

   Ein Sprite hat tatsächlich zwei verschiedene Winkel. Es kann einen Winkel haben, den es zeigt (genannt imgAngle in simpleGame) und den Winkel, den es bewegt (genannt moveAngle). Wenn Sie den Winkel ändern, ändern Sie sowohl die Bewegung als auch die Bildwinkel unter der Annahme, dass sich das Objekt einfach in die Richtung bewegt, in die es zeigt.

   Für einfache Beispiele ist das in Ordnung, aber viele Bewegungsarten erfordern die Entkopplung von Bild und Bewegungswinkel. Mit der changeImgAngleBy () -Methode können Sie die Richtung ändern, in die das Bild zeigt, ohne den Bewegungswinkel zu ändern. (Es gibt auch eine changeMotionAngle () - Methode, die jedoch nicht sehr oft verwendet wird.)

4. Fügen Sie einen Kraftvektor hinzu, um den Schub zu simulieren.

   Wenn der Benutzer den Aufwärtspfeil drückt, feuert das Schiff seine Hauptraketen ab. Dies fügt einen kleinen Kraftvektor in der Richtung hinzu, in die sich das Schiff gerade befindet. Verwenden Sie die getImgAngle () -Methode, um die Richtung zu ermitteln, in die sich das Schiff gerade befindet. Verwenden Sie diesen Wert, um anzugeben, wo die Kraft hinzugefügt werden soll.

   Da dieser Code in der Animationsschleife vorkommt und verstärkt wird, während die Pfeiltaste gedrückt gehalten wird, ist nur eine sehr kleine Kraft erforderlich.