Question

可能重复：
JavaScript move delay and multiple keystrokes

我是新手，并使用javascript学习HTML5画布。我创建了一个事件来左右移动一个对象，我的问题是每当你按住键或切换到另一个键时的延迟。我知道下面的代码中缺少请帮助我。提前谢谢。

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();
}

Answer 1

我建议您使用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事件之间的延迟问题消失了真正关心的是密钥是否已经发生。

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

如何修复javascript keydown的延迟

1 个答案: