Ich versuche, ein div zu bekommen, das wie ein Boot durch Wasser zieht, aber ich habe Probleme, die Rotation richtig zu machen.
Folgendes habe ich bisher:
jsFiddle
JS
%Vor%CSS
%Vor%HTML
%Vor%Gibt es einen besseren Weg, um die Rotation so einzurichten, dass die Vorderseite des Bootes auch bei einer Drehung von 360 Grad immer vorne liegt?
Zusätzlicher Kontext: Ich arbeite an einem Basisspiel
Kopfgeldupdate: Ich brauche das "Boot", um in einer kontinuierlichen Bewegung in einem Kreis gezogen werden zu können, ohne die Drehrichtung umdrehen zu müssen.
Es ist ein bisschen komplizierter, aber so würde ich es machen:
%Vor% Es vergleicht die aktuelle Mausposition mit der Stelle, an der das Zentrum des Kanus vor einiger Zeit war.
Die Zeit wird basierend darauf festgelegt, wie schnell die Maus bewegt wird, da langsamere Bewegungen eine längere Zeitüberschreitung benötigen usw.
Es ist auch eine gute Idee, die Timeouts zu löschen, damit sie nicht aufgebaut werden, auch wenn es beim Testen nicht wirklich ein Problem war, und die Verwendung von Math.abs stellt sicher, dass es immer eine positive Ganzzahl ist.
Ich habe dem CSS ein paar weitere Browserpräfixe hinzugefügt.
Sie müssen:
position bei jeder Änderung position speichern
Bewegung sieht nicht weich aus, ist aber näher an dem, was Sie wollen.
Wenn Sie den Wasserwiderstand simulieren möchten, müssen Sie die Winkeländerung um einen Faktor reduzieren und dann ein Zeitintervall o.ä. verwenden, um die Bewegung nach dem Ziehen fortzusetzen, bis der Winkel des Schiffes dem Winkel entspricht, den es haben soll haben oder ein neues Ziehereignis beginnt.
Tags und Links jquery draggable game-physics rotation jquery-ui-draggable