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:
Und das Ganze hier im Browser:
http://www.thehappy.de/~xeno/keydown/index.html
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