I have the beginnings of a 2d Javascript game - at the moment the player can drive a triangle around the screen using the arrow keys.
The problem is that sometimes the triangle will get stuck rotating in one direction or moving forward until the corresponding control key is pressed again and the onkeyup event is fired again. This usually happens when more than one control key is pressed at the same time.
I can't work out why it's getting stuck in the first place unless the onkeyup events aren't getting fired for some reason. Any help would be much appreciated, thank you.
Here's some of the code, you can find a fully working example on JSFiddle:
...
function init(){
var canvas = document.getElementById('canvas');
if(canvas.getContext){
setInterval(play, 50);
}
}
function play(){
printTriState();
updateTriAcceleration();
applyTriVelocity();
updateTriRotation();
draw();
}
document.onkeydown = function(event){
if(!event.keyCode){
keycode = window.event.keyCode;
} else {
keycode = event.keyCode;
}
console.log(event.keyCode);
switch(keycode){
//left
case 37:
tri.rotation = -1;
break;
//up
case 38:
tri.throttle = true;
break;
//right
case 39:
tri.rotation = 1;
break;
//down
case 40:
tri.currentSpeed = 0;
break;
default:
break;
}
};
document.onkeyup = function(event){
if(!event.keyCode){
keycode = window.event.keyCode;
} else {
keycode = event.keyCode;
}
console.log(event.keyCode);
switch(keycode){
//left
case 37:
tri.rotation = 0;
break;
//up
case 38:
tri.throttle = false;
break;
//right
case 39:
tri.rotation = 0;
break;
//down
case 40:
break;
default:
break;
}
};
function updateTriRotation(){
if(tri.rotation == 1){
tri.orientation += tri.rotationSpeed;
} else if (tri.rotation == -1){
tri.orientation -= tri.rotationSpeed;
} else {
tri.orientation += 0;
}
}
...