Hinzufügen von Drag-Effekten zu Ihrem HTML5-Spiel - Dummies

Das Vektoradditionsprinzip kann in vielerlei Hinsicht für Ihr HTML5-Spiel nützlich sein. Zum einen kann es einen Schlepp-Effekt hinzufügen und somit zu einem präziseren Verhalten von Landfahrzeugen führen. Stellen Sie sich vor, Ihr Auto steckt (wieder) mitten in der Nacht in einer schlechten Umgebung. Sie können nicht einfach die Position des Autos direkt ändern. Sie können nicht einmal seine Bewegung ändern.

Stattdessen müssen Sie eine Kraft hinzufügen. Wenn Sie Kraft hinzufügen, fügen Sie den Bewegungsvektor langsam hinzu. Schließlich fährt das Auto in Bewegung. Wenn Sie aufhören, Kraft anzuwenden, wird es schließlich aufhören, da Windwiderstand und Rollwiderstand das Fahrzeug verlangsamen.

Spiele ziehen Rennen

Das Ziehen. html Beispiel zeigt ein realistisches Auto, das langsam beschleunigt und zum Stillstand kommt, wenn der Beschleuniger (in diesem Fall der Pfeil nach oben) losgelassen wird.

Sie müssen das Programm wirklich in Aktion sehen, um sein Verhalten zu würdigen.

Drag-Var-Spiel; var Boot; Funktion Car () {tCar = neues Sprite (Spiel, "Auto. Png", 100, 50); tCar. checkKeys = Funktion () {Konsole. log (dies. Geschwindigkeit); if (SchlüsselDown [K_LEFT]) {this. changeImgAngleBy (-5);} if (SchlüsselDown [K_RIGHT]) {this. changeImgAngleBy (5);} if (SchlüsselDown [K_UP]) { dies. addVector (this. imgAngle, 2); } // in die aktuelle Richtung bewegen. addVector (this. imgAngle, 2);} // end checkKeys tCar. checkDrag = function () { Geschwindigkeit = dies. getSpeed ​​(); Geschwindigkeit * =. 95; dies. setSpeed ​​(Geschwindigkeit); } // end checkDrag Rückgabe von tCar;} // end car def Funktion init () {game = new Scene (); Spiel. setBG ("# 666666"); Auto = neues Auto (); Spiel. start ();} // end init Funktion update () {Spiel. klar(); Auto. checkKeys (); Auto. checkDrag (); Auto. update ();} // end update

Wie man einen Drag in Deinem Spiel implementiert

Diese Version verwendet eine realistischere kraftbasierte Bewegung. Wenn der Benutzer den Aufwärtspfeil drückt, baut das Fahrzeug eine Geschwindigkeit auf. Wenn der Benutzer den Aufwärtspfeil gedrückt hält, erreicht das Fahrzeug natürlich eine Höchstgeschwindigkeit. Wenn der Benutzer den Aufwärtspfeil loslässt, verlangsamt sich das Auto allmählich und stoppt schließlich. Kraftvektoren sind der Schlüssel.

So funktioniert es:

1. Baue ein Basisfahrzeug.

   Erstellen Sie ein benutzerdefiniertes Sprite mit einer checkKeys () - Methode und überprüfen Sie alle normalen Pfeiltasten. Der Code zum Überprüfen der linken und rechten Pfeile ist genau das, was Sie erwarten.

2. Bewegen Sie sich mit einem Kraftvektor vorwärts.

   Der Code für die Vorwärtsbewegung ist etwas anders. Anstatt die Geschwindigkeit direkt zu ändern, wenden Sie eine Kraft in der aktuellen Richtung des Fahrzeugs an. Verwenden Sie die getImgAngle () -Methode des Sprites, um zu bestimmen, in welche Richtung das Auto zeigt, und fügen Sie eine kleine Kraft in diese Richtung hinzu.

3. Erstellen Sie eine checkDrag () -Methode.

   Autos fahren nicht nur ohne Strom. Wind- und Bodenwiderstand verlangsamen sie, und schließlich hören sie auf. Simulieren Sie die verschiedenen Drag-Kräfte, indem Sie Ihrem Objekt eine checkDrag () -Methode hinzufügen.

4. Multiplizieren Sie die Geschwindigkeit mit einem Schleppfaktor.

   Für dieses Beispiel rauben die verschiedenen Widerstandskräfte dem Fahrzeug in jedem Frame 5 Prozent seiner Geschwindigkeit. Denken Sie daran, dass das Spiel mit 20 Frames pro Sekunde läuft, also ist die Widerstandskraft ziemlich groß. Sie können den Drag-Effekt auf viele Arten erreichen, aber der einfachste Weg ist, die Geschwindigkeit des Autos mit einem Wert kleiner als 1 zu multiplizieren.

5. Keine Bremsen!

   Welches Auto mit Selbstachtung hat Bremsen? Im Ernst, Sie möchten vielleicht eine Abwärtspfeil-Eingabe hinzufügen, aber es sollte nicht notwendig sein, weil das Auto von selbst verlangsamen wird.

6. Würzen Sie nach Belieben.

   Dieses Beispiel bietet eine grobe Übersicht, aber Sie können eine Reihe von Werten ändern, um genau die gewünschte Fahrzeugleistung zu erhalten. Sie können einen stärkeren Motor (oder eine kleinere Masse) simulieren, indem Sie den Kraftvektor erhöhen, wenn Sie das Gaspedal drücken.

   Sie können eine reaktionsfreudigere Aufhängung simulieren, indem Sie die Umdrehungsgeschwindigkeit ändern, wenn der Benutzer die rechten oder linken Pfeile drückt. Sie können auch ein mehr oder weniger effizientes Auto simulieren, indem Sie die Widerstandsrate ändern. Im Moment dreht sich das Auto mit jeder Geschwindigkeit, aber Sie können Links- und Rechtspfeil-Eingaben verhindern, wenn das Auto unter einer bestimmten Geschwindigkeit ist.