Elemente einer Webseite flüssig bewegen

xeno

Moderator
Mitarbeiter
Endlich mal wieder selber nen Thread eröffnet... ;)

Ich habe vor, ein Element einer Webseite mit den Pfeiltasten der Tastatur flüssig zu bewegen. Mit JQuery (oder JavaScript) ist das recht schnell erledigt, nur komme ich an einer Sache nicht weiter:

Anschlagverzögerung!

Ich denke mal, daß die meisten wissen was ich meine. Das Element bewegt sich kurz, bleibt stehen, und dann bewegt es sich halt schnell. Das gilt es zu verhindern.

Vor vielen vielen Jahren habe ich sowas in Basic geschrieben. Da konnte ich aber auch den Tastatur-Interrupt abgreifen, und habe das Problem damit erschlagen. Im Browser funktioniert das vermutlich nicht so einfach.

Jemand eine Idee, wie ich das umsetzen könnte? Mit JavaScript werde ich vermutlich nicht weiterkommen, mh? Hier mal ein einfacher Beispielcode:

Code:
<!DOCTYPE html>
<html lang="en">
	<head>
		<script type="text/javascript" src="jquery-1.7.1.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$(this).keydown(function(event) {
					if (!$("#foobar").is(":animated")) {
						if (event.which == 37) {
							$("#foobar").animate({left: "-=10"}, 400);
						}
						if (event.which == 38) {
							$("#foobar").animate({top: "-=10"}, 400);
						}
						if (event.which == 39) {
							$("#foobar").animate({left: "+=10"}, 400);
						}
						if (event.which == 40) {
							$("#foobar").animate({top: "+=10"}, 400);
						}
					}
				});
			});
		</script>
		<style type="text/css"><!--
			#foobar {
				width: 50px;
				height: 50px;
				background: black;
				position: absolute;
				left: 200px;
				top: 200px;
			}
		--></style>
	</head>
	<body>
		<div id="foobar">
		</div>
	</body>
</html>

Und das Ganze hier im Browser:

http://www.thehappy.de/~xeno/keydown/index.html
 

Tsjuder

Stammuser
Ich muss ehrlich gestehen, dass ich nicht das Gefühl habe, dass ich zu 100% verstanden habe wo genau dein Problem ist.
Aber wenn dein Problem die Anschlagsverzögerung ist vom ersten drücken bis zum mehrmaligen drücken und die Wiederholrate nicht schnell genug ist, lässt sich das doch einfach mit booleschen Variablen lösen oder?

Hab keine Ahnung von JavaScript, aber was ich meine: Sobald jemand die Pfeiltaste nach rechts gedrückt hat, also bei keydown, setzt du ein Flag, dass nach rechts gedrückt ist und lässt das Objekt durch Abfrage des Flags solange nach rechts bewegen bis die Taste losgelassen wird, also keyup (???). Hilft dir das oder habe ich dich total falsch verstanden?
 

xeno

Moderator
Mitarbeiter
Der Ansatz klingt nicht verkehrt. Schleife mit Abfrage, Timer dazwischen, ... probier ich morgen aus. Danke schon mal :)

Nachtrag: kann aber sein (hab's nicht nachgeprüft), daß der Event einmal getriggert wird, und bei der zweiten Abfrage nicht mehr existiert. Wir werden sehen...
 

BasicAvid

Member
Diese Ruckler kommen aber eher von der animate-Methode. Diese Methode ist eigentlich dafür gedacht Animationen auszuführen.

Warum machste das ganze nicht über den Offset?

Beispiel:
HTML:
<script type="text/javascript">
            $(document).ready(function() {
                $(this).keydown(function(event) {                    
                    if (event.which == 37) {    
                        var pos = $("#foobar").offset().left;
                        $("#foobar").offset({left: pos-10})
                    }
                    if (event.which == 38) {
                        var pos = $("#foobar").offset().top;
                        $("#foobar").offset({top: pos-10})
                    }
                    if (event.which == 39) {
                        var pos = $("#foobar").offset().left;
                        $("#foobar").offset({left: pos+10})
                    }
                    if (event.which == 40) {
                        var pos = $("#foobar").offset().top;
                        $("#foobar").offset({top: pos+10})
                    }
                    event.preventDefault();
                });
            });
        </script>
 

Tsjuder

Stammuser
Diese Ruckler kommen aber eher von der animate-Methode.

Gut, dass wäre dann natürlich was JavaScript spezifisches womit ich mich wie gesagt nicht auskenne.

Ansonsten hat man auch immer diese Verzögerung die ich meinte. Also wenn man jetzt einfach mal "a" in dieser Textbox gedrückt hält kommt auch erst ein a dann ein längere Pause und dann ganz viele a's mit konstanter Geschwindigkeit. Das sieht bei solchen Sachen meiner Meinung nach auch immer doof aus, daher die Lösung mit den Flags was dann, wie von t3rr0r.bYt3 angemerkt, einem Zustandsautomaten entspricht, der bei drücken der Rechtstaste (keydown) in einen Zustand übergeht der das Objekt nach rechts bewegen lässt bis er wieder in einen "neutralen" Zustand geht durch loslassen der Rechtstaste (keyup).
 

xeno

Moderator
Mitarbeiter
Diese Ruckler kommen aber eher von der animate-Methode. Diese Methode ist eigentlich dafür gedacht Animationen auszuführen.

Warum machste das ganze nicht über den Offset?

Nene, das animate() war nur ein Versuch mit Zeit zu spielen. Also quasi die erste lange Tastaturpause einfach mit ner Animation zu verbergen. Hat aber nicht den gewünschten Effekt.

Hab das nun mal rausgenommen, und einfach ein css() draus gemacht, dürfte dem was du gepostet hast gleichkommen. Sieht dann so aus:

http://www.thehappy.de/~xeno/keydown/index.html
 
Oben