jquery - 通过按键移动元素(多个)

Question

对角线移动不起作用并在左长按/右同时按下时出现问题

但是按两次按键，船就会变得疯狂!

$(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

我搞乱了类似的事情，这是我遇到的一个有效的解决方案。

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

延迟的问题似乎是大多数浏览器都会接受第一个输入(在 keyDown 上)，然后在一遍又一遍地运行函数之前有半秒的延迟。如果我们不记得按下按键时的功能，而是有一个时间间隔检查一个关联数组，在该数组中存储按下的键，这似乎可以平滑移动。它还允许同时按下多个键，这意味着对角线移动。然后我们将使用 keyup 事件删除相应的键。

在此解决方案中，您有两种方法来管理正在移动的元素的速度。

1. 间隔的更新频率。 (上面的演示中为 20 毫秒)
2. 平面每次移动的像素数。 (上面演示中的 5)

我发现 20 毫秒的间隔频率可以让您的运动相当平滑。

我意识到这是一个非常古老的线程，但我想我无论如何都会做出贡献。