Ich arbeite zum Spaß an einem kleinen HTML / JavaScript / CSS3-Projekt. Ich versuche im Grunde, ein Rad zu machen, das im Browserfenster rollt. Um das Rad zu steuern, verwende ich Keyup- und Keydown-Events für die Cursortasten (links und rechts drehen Sie das Rad und nach oben und unten rollen Sie es vorwärts oder rückwärts).
Ich habe es bisher ziemlich gut funktioniert, aber es gibt zwei große Pannen. Sagen wir, ich will das Rad vorwärts rollen und ohne anzuhalten, möchte ich es ein wenig nach rechts drehen, dann würde ich die Aufwärts-Taste gedrückt halten und die rechte Cursortaste drücken. Wenn ich das mache, gibt es eine Pause in der Bewegung, bevor es beide Ereignisse registriert und weiterläuft.
Das ist eines der Probleme, das Hauptproblem ist, dass, sobald ich die vorherige Aktion ausgeführt habe und das Rad in einem gewünschten Winkel ist, wenn ich die rechte Cursortaste loslasse, registriert der Browser beide Tasten als freigegeben und die Rad steht still. Hier ist ein jsFiddle von dem, wie es aussieht: Ссылка . Ich weiß, dass der Code ein Chaos ist, aber es ist eine Arbeit in Arbeit / Lernerfahrung und ich habe nur für einen Monat oder so programmiert.
Jedenfalls danke für jede Hilfe. Es funktioniert derzeit nur in Chrome, soweit ich weiß. Habe mich nicht wirklich darum gekümmert, Kompatibilitätsprobleme in diesem Stadium zu beheben.
Was passiert, ist also im Wesentlichen eine Einschränkung, die Ihr Betriebssystem eingebaut hat, aber es gibt eine einfache Lösung. Zuerst erkläre ich die Begrenzung und dann die Umgehung.
Wenn Sie (in einem Textfeld) die Taste "j" gedrückt halten, erscheint zuerst ein "j", und nach einer kurzen Verzögerung würden viele "j" "jjjjjjjjjjjjjjjjjjj" erscheinen
Dies ist das gleiche Problem, das Sie erleben. Das Ereignis wird einmal ausgelöst, wartet einen Moment und wird dann mehrmals ausgelöst.
Die Lösung ist jedoch einfach. Anstatt, dass sich dein Rad bewegt, wenn die Ereignisse ausgelöst werden ... muss es ständig aktualisiert werden und getrennt verfolgen, welche Tasten hoch oder runter sind.
Der Key Handler würde ungefähr so aussehen ...
%Vor%(Sie würden den Key-Handler an den Körper oder das gewünschte Element anhängen)
Ihr Rad würde eine Update-Funktion haben, die wie folgt aussieht ...
%Vor%und dann hätte das Spiel so etwas ...
%Vor%Auf diese Weise wird Ihr Rad immer auf der Grundlage des aktuellen Status der Schlüssel aktualisiert, und Sie müssen sich nicht auf die Begrenzungen der feuernden Ereignisse verlassen. :)
Hier ist ein Ausschnitt aus einem einfachen Spiel, das ich einmal geschrieben habe
%Vor%Dies zeichnet alle aktuellen Tastenzustände auf. Dann ist Ihr Spiel "Tick" auf einem setTimeout (), anstatt Schlüsselereignisse zu verschieben und nach geeigneten Schlüsseln zu suchen.
%Vor%Hier ist das Spiel;
Das Problem, vor dem Sie stehen, ist, weil Ihr Code nur einen einzigen Tastendruck erkennt, während Ihr Spiel 2 Tastendrücke benötigt.
setze diese Zeile in Schleife über die Größe von e. Dadurch werden alle gedrückten Tasten als 1 gesetzt. Zur Zeit wird nur eine Taste gedrückt, die nacheinander gedrückt wird.
%Vor%Sieh dir diesen Thread an und du bekommst vielleicht, was du brauchst. obwohl es jQuery ist, könnte es konzeptionell helfen. m auch daran mit js arbeiten ... wenn etwas Neues kommt wird teilen ...
Erkennen mehrerer Schlüssel bei einem einzelnen Tastendruckereignis in jQuery
Ihr Code und Konzept ist cool, wenn Sie wirklich einen Monat alt in der Programmierung sind.
Tags und Links javascript css3 key-events