I am writing a simple page with JQuery and HTML5 canvas tags where I move a shape on the canvas by pressing 'w' for up, 's' for down, 'a' for left, and 'd' for right. I have it all working, but I would like the shape to start moving at a constant speed upon striking a key. Right now there is some kind of hold period and then the movement starts. How can I get the movement to occur immediately?
Here the important part of my code:
Your browser does not support the HTML5 canvas tag.
start navigating
coords should pop up here
key should pop up here
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//keypress movements
var xtriggered = 0;
var keys = {};
var north = -10;
var east = 10;
var flipednorth = 0;
$(document).ready(function(e){
$("input").keydown(function(){
keys[event.which] = true;
if (event.which == 13) {
event.preventDefault();
}
//press w for north
if (event.which == 87) {
north++;
flipednorth--;
}
//press s for south
if (event.which == 83) {
north--;
flipednorth++;
}
//press d for east
if (event.which == 68) {
east++;
}
//press a for west
if (event.which == 65) {
east--;
}
var msg = 'x: ' + flipednorth*5 + ' y: ' + east*5;
ctx.beginPath();
ctx.arc(east*6,flipednorth*6,40,0,2*Math.PI);
ctx.stroke();
$('#soul2').html(msg);
$('#soul3').html(event.which );
$("input").css("background-color","#FFFFCC");
});
$("input").keyup(function(){
delete keys[event.which];
$("input").css("background-color","#D6D6FF");
});
});
</script>
please let me know if I shouldn't be posting code this lengthy.
