2012-09-05 89 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