Hallo Leute,
ich habe mithilfe von "tabindex=0" ein div fokusierbar gemacht und ihm eine keylistener verpasst(keydown).
Dadurch lässt sich ein im canvas eine Spielfigur steuern. Das Problem ist,
dass es anscheinend zu einer Verzögerung von ca einer halben Sekunde kommt, bis JQuery checkt, dass die Taste gedrückt wird.
Ich hoffe ihr wisst, was ich meine. Wir kann ich diese Verzögerung umgehen?
Hier ein kleines ausführbares Programm: index.html
<!DOCTYPE html>
<html>
<head>
<title>Spiel</title>
<script type="text/javascript" src="js/jquery1.8.3.min.js"></script>
</head>
<body>
<div tabindex="0">
<canvas id="canvas" style="background-color: white" width="320" height="240"></canvas>
</div>
</body>
<script>
var x = 0;
var y = 0;
var c = document.getElementById("canvas");
var ctxt = c.getContext("2d");
$("div").focus();
$("div").keypress(function(e){
switch(e.keyCode){
case 38:
y -= 5;
break;
case 39:
x += 5;
break;
case 40:
y += 5;
break;
case 37:
x -= 5;
break;
}
draw();
});
function draw(){
console.log("draw");
ctxt.fillStyle="red";
ctxt.fillRect(x,y,10,10);
}
</script>
</html>
Am besten öffnet ihr es mit dem Firefox, weil ich es nur damit bis jetzt getestet habe(Version 17.0.1).
Haltet eine Richtung gedrückt und ihr müsstet feststellen, dass der Browser nach ca 1 Sekunde reagiert.
Danke im voraus.