使用带有 JavaScript 或 Jquery 的箭头键的交互式和快速移动

Question

我正在创建一个小游戏，其中我的对象使用箭头键左右移动，但移动速度不快，甚至没有交互性，就像我稍后按下键对象移动时一样。 任何人都可以建议我如何在用户体验方面做得更好。

这是我控制移动物体的代码的一部分（它的两个玩家游戏，所以箭头键是一个，A W D 是第二个）

$(document).keydown(function(e){

switch(e.keyCode){
    //Move left
    case 37:
    $('.playerOne').stop().animate({"left":"-=15px"}, '1000', 'linear');
    return false;
    break;
    //Move right
    case 39:
    $('.playerOne').stop().animate({"left":"+=15px"}, '1000', 'linear');
    return false;
    break;
    //Shoot
    case 38:
    shotEffect(1,'hitOne','bottom','playerOne');
    break;
    //Move right
    case 68:               
            $('.playerTwo').stop().animate({"left":"+=15px"}, '1000', 'linear');
    return false;
    break;
    //Move left
    case 65:
    $('.playerTwo').stop().animate({"left":"-=15px"}, '1000', 'linear');
    return false;
    break;
    //Shoot
    case 87:
    shotEffect(1,'hitTwo','top','playerTwo');
    break;
}

});

提前致谢

Answer 1

对键盘输入响应缓慢的一个原因是您正在侦听 JavaScript keydown 事件或类似的键盘事件。但是，重复的键盘事件受用户控制面板中设置的键盘初始重复延迟和重复率的影响。

例如，在具有默认设置的 Windows 系统上，初始键盘延迟设置得相当长——大约为半秒。因此，当您按下键时，您会立即得到一个初始的keydown，但第一个重复的keydown 不会再过半秒。在初始延迟之后，keydown 事件的频率取决于用户的重复率。

您需要做的是随时跟踪哪些键被按下，然后在您的游戏循环中（可能使用requestAnimationFrame() 或setInterval()）检查当前哪些键被按下。这样，键盘重复时间不受用户设置控制，而是由游戏循环的速度控制。

一个简单的方法是使用keydrown library。尝试该页面上的演示，看看它是否满足您的需求。

另外，这里有一个StackOverflow answer，其中讨论了这个问题和一些类似的代码。

在两者之间，我推荐使用 keydrow，因为它更完善，但也值得一看 SO 答案。

当然，您的代码中也可能存在其他问题，但这是肯定要解决的问题。