Element mit Tastendruck verschieben (mehrfach)

Ich habe mich mit einer ähnlichen Sache herumgeschlagen und hier ist eine Lösung, die ich gefunden habe, die funktioniert.

Demo

Das Problem mit der Verzögerung scheint zu sein, dass die meisten Browser die erste Eingabe (auf keyDown) nehmen und dann eine halbe Sekunde Verzögerung haben, bevor sie die Funktionen immer wieder ausführen. Wenn wir uns nicht an die Funktion bei Keydown erinnern, sondern ein Intervall, das ein assoziatives Array überprüft, in dem wir speichern, welche Tasten gedrückt werden, scheint dies die Bewegung zu glätten. Außerdem können mehrere Tasten gleichzeitig gedrückt werden, was eine diagonale Bewegung bedeutet. Dann entfernen wir die entsprechenden Schlüssel mit dem keyup-Ereignis.

In dieser Lösung haben Sie zwei Möglichkeiten, die Geschwindigkeit des Elements, das Sie verschieben, zu verwalten.

1. Die Aktualisierungshäufigkeit des Intervalls. (20ms in der obigen Demo)
2. Die Anzahl der Pixel pro Bewegung des Flugzeugs. (5 in der obigen Demo)

Ich finde, dass 20 ms auf der Intervallfrequenz Ihnen ziemlich reibungslose Bewegung gibt.

Ich merke, dass dies ein wirklich alter Faden ist, aber ich dachte, ich würde trotzdem beitragen.

Wie wäre es mit jquery animate? Es verhindert fast verzögerte Bewegung.

Siehe Demo

jsBin-Demo

Wenn Sie sich auf Tastaturereignisse verlassen, um ein Element zu verschieben, hängt dies von der OS-Schlüsselintervallverzögerung ab.

Verwenden Sie stattdessen das Spielintervall und überprüfen Sie die gedrückten Tasten in einem Objekt

Bei keydown keyup Events, wenn der von event.which zurückgegebene keyCode >36 || <41 bedeutet, dass Pfeiltasten verwendet wurden. Speichern Sie in einem K (Schlüssel) -Objekt einen booleschen Wert ( true/false ) für die Schlüsselnummer-Eigenschaft.

Intervall:

Innerhalb einer window.requestAnimationFrame erhöhen oder verringern Sie die x , y -Position Ihres Elements, wenn eine Schlüsselnummer-Eigenschaft (innerhalb unseres K -Objekts) true ( if(K[37]) ) ist.

Diagonales Bewegungsproblem:

Wenn ein Element diagonal unter Verwendung von gleichzeitig (d. h.) ↑ und → bewegt wird, ist eine Kompensation für den höheren Diagonalabstand erforderlich Dazu müssen Sie mehrere Schlüssel registrieren und den Multiplikator verringern: