20

重複の可能性：
JavaScriptの移動遅延と複数のキーストローク

私は新しく、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();
}
4

1 に答える 1

55

キーダウンイベントに直接反応するのではなく、キーダウンイベントとキーアップイベントを使用して、現在ダウンしているキーのリストを維持することをお勧めします。次に、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();

これにより、複数のキーを一度に処理できるようになります。たとえば、ユーザーが左矢印と上矢印を同時に押すと、キーを押したままにした後のキーダウンイベント間の遅延の問題がなくなります。キーアップが発生したかどうかです。

ゲームを実装していない可能性があることは承知していますが、この非常に単純なデモに示すように、この「ゲームループ」の概念が機能するはずです。http：//jsfiddle.net/nnnnnn/gedk6/

于 2012-09-05T01:56:10.120 に答える