2012-09-05 52 views
14

可能重复:
JavaScript move delay and multiple keystrokes如何解决在JavaScript延迟的keydown

我是新使用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(); 
} 
+1

重复延迟是一个操作系统的设置,而不是一个JavaScript的事情 –

回答

28

而不是试图直接反应到keydown事件,我建议你使用的keydown和KeyUp事件保持一个列表,它的键是目前下。然后实现一个“游戏循环”,检查每个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/

+1

别客气。 (请注意,认真的游戏编码人员会使用更复杂的技术来控制游戏循环的速度,但如果您有兴趣,您可以Google这些人 - 这个答案是为了简单介绍游戏循环和键盘游戏,状态概念来让你过去当前的问题。) – nnnnnn

+0

@nnnnnn这段代码片断变成了我遇到的问题的解决方案。感谢代码!然而,有没有什么办法可以检测到'keyup'(这样我可以触发另一个函数)? – AKG

+2

@AKG - 我给出的例子已经有了一个keyup处理程序,所以你可以在那里给你的函数添加一个调用。或者只需添加第二个键控处理程序。 – nnnnnn