Question

I have an object on canvas that I would like to move with keyboard events,

My event function is as follows

function onKeyDown(evt) {
if (evt.keyCode == 40) { downDown = true;}
if (evt.keyCode == 39) { rightDown = true;}
if (evt.keyCode == 38) { upDown = true;}
if (evt.keyCode == 37) { leftDown = true;}
}

and my onKeyUp function is the same except with false as the value

then I attach it as

$(document).keydown(onKeyDown);
$(document).keyup(onKeyUp);

I have a draw function that is called within my init as intv = setInterval(draw, 10); with the following statements

                            if (rightDown) { x += dx;}
                            if (upDown) { y -= dy;}
                            if (downDown) { y += dy;}
                            if (leftDown) {x -= dx;}

Everything except the -x direction (left Down) works well. Such that I can move the object up,right and down. When left is pressed the object continues moving left. Are my conditional statements setup improperly ?

The full demo is at http://jsfiddle.net/avSvu/

Answer 1

function onKeyUp(evt) {
    if (evt.keyCode == 40) { downDown = false;}
    ...

    //      v----- capital K ?
    if (evt.KeyCode == 37) { leftDown = false;}
}

Live demo: http://jsfiddle.net/avSvu/5/