20

可能重复：
JavaScript 移动延迟和多次击键

我是新手，正在学习 HTML5 画布和 javascript。我创建了一个事件来左右移动对象，我的问题是每当您按住键或切换到另一个键时都会出现延迟。我知道下面的代码中缺少请帮助我。先感谢您。

c.addEventListener('keydown',this.check,true);
  function check(el) {
    var code = el.keyCode || el.which;
    if (code == 37 || code == 65){
    x -=1;
    }

    if (code == 39 || code == 68){
    x += 1;
    }

  el.preventDefault();
}
4

1 回答 1

55

我建议您使用 keydown 和 keyup 事件来维护当前已关闭的键的列表，而不是尝试直接对 keydown 事件做出反应。然后实现一个“游戏循环”，每 x 毫秒检查哪些键按下并相应地更新显示。

var keyState = {};    
window.addEventListener('keydown',function(e){
    keyState[e.keyCode || e.which] = true;
},true);    
window.addEventListener('keyup',function(e){
    keyState[e.keyCode || e.which] = false;
},true);

x = 100;

function gameLoop() {
    if (keyState[37] || keyState[65]){
        x -= 1;
    }    
    if (keyState[39] || keyState[68]){
        x += 1;
    }

    // redraw/reposition your object here
    // also redraw/animate any objects not controlled by the user

    setTimeout(gameLoop, 10);
}    
gameLoop();

您会注意到，这可以让您一次处理多个键，例如，如果用户同时按下向左和向上箭头，并且当一个键被按住时后续 keydown 事件之间的延迟问题就会消失，因为您真正关心的只是是是否发生了keyup。

我意识到您可能没有实现游戏，但是这个“游戏循环”概念应该适合您，如这个非常简单的演示所示：http: //jsfiddle.net/nnnnnn/gedk6/

于 2012-09-05T01:56:10.120 回答