javascript - 使用带有 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讨论问题和一些类似的代码。

在这两者之间，我推荐 keydrown，因为它开发得更全面，但也值得一看 SO 答案。

当然，您的代码中也可能存在其他问题，但这绝对是一个需要解决的问题。