move element with keypress (multiple)

Question

Diagonal move not working and issue on left-longPress/right simultaneous

But on double keypress the ship goes crazy!

$(document).bind('keydown', function(e) {
    var box = $("#plane"),
        left = 37,
        up = 38,
        right = 39,
        down = 40

    if (e.keyCode == left) {
        box.animate({left: "-=5000"},3000);
    }
    if (e.keyCode == up) {
        box.animate({top: "-=5000"},3000);
    }
    if (e.keyCode == right) {
        box.animate({left:"+=5000"},3000);
    }
    if (e.keyCode == down) {
        box.animate({top: "+=5000"},3000);
    }
});
$(document).bind('keyup', function() {
    $('#plane').stop();
});

Answer 1

I messed around with a similar thing and here's a solution I came across that works.

setInterval(movePlane, 20);
var keys = {}

$(document).keydown(function(e) {
    keys[e.keyCode] = true;
});

$(document).keyup(function(e) {
    delete keys[e.keyCode];
});

function movePlane() {
    for (var direction in keys) {
        if (!keys.hasOwnProperty(direction)) continue;
        if (direction == 37) {
            $("#plane").animate({left: "-=5"}, 0);                
        }
        if (direction == 38) {
            $("#plane").animate({top: "-=5"}, 0);  
        }
        if (direction == 39) {
            $("#plane").animate({left: "+=5"}, 0);  
        }
        if (direction == 40) {
            $("#plane").animate({top: "+=5"}, 0);  
        }
    }
}

Demo

The problem with the delay seems to be that most browsers will take the first input (on keyDown) and then they have half a second delay before running the functions over and over. If we don't recall the function on keydown, but rather have an interval checking an associative array where we store what keys are being held down, that seems to smooth out movement. It also allows for multiple keys to be pressed at once, which means diagonal movement. Then we'll remove the respective keys by using the keyup event.

In this solution you have two ways of managing the speed of the element you're moving.

1. The update frequency of the interval. (20ms in the demo above)
2. The pixel count per move of the plane. (5 in the demo above)

I find that 20 ms on the interval frequency gives you fairly smooth movement.

I realize that this is a really old thread, but I figured I'd contribute anyway.