2

HTML5 Canvas で簡単なゲームを作ろうとしています。1 秒あたり最大 2 つのキーボード入力が必要です。

これまでの私のコードは次のとおりです。

function move( x, y, r ) {
  var canid=document.getElementById("draw");
  canid.addEventListener('keydown',readkey,false);

  function readkey(e) {
    if(e.keyCode == 37) {
      clearField();
      x = x-draw.width / 10;
      redrawpic(x,y,r);
    }
    else if(e.keyCode == 38){
      clearField();
      y = y-draw.height / 10;
      redrawpic( x, y, r );
    }

    //..........etc
  }
}

関数 move は、あるセルから別のセルに画像を移動するために使用されます。2 つの移動の間に遅延を設定する方法は?

4

2 に答える 2

5

タイムスタンプを使用して、最後のイベントがいつ発生したかを確認できます。

function move(x,y,r){

   /* your variable declarations*/
   var d1 = Date.now();
   var d2;

        function readkey(e){
             d2 = Date.now();

             // difference between timestamps needs to be 500ms
             if(d2-d1 > 500){
                  // set old Timestamp to new one
                  d1 = d2;
                  /*
                     Rest of your code
                  */
             }

これにより、500ms ごとに 1 つのキー イベントが許可されます。1 秒間に 2 つのイベント (50 ミリ秒で発生し、950 ミリ秒で一時停止する可能性があります) のようにまったく同じではありませんが、十分に近いのでしょうか?

Timeout/Interval も可能ですが、個人的には連続した (おそらく不要な) タイムアウト呼び出しのオーバーヘッドが嫌いです。

于 2013-07-06T14:03:29.923 に答える
3 
var throttle = false;
function readkey(e) {
    if (throttle)
        return;
    throttle = true;
    setTimeout(function () { throttle = false; }, 500);
    /* the rest of your code */

500 ミリ秒は 1 秒あたり 2 つの入力ですが、個別に調整されます。また、1 秒間に入力があった回数を数えることもできます。何かのようなもの

    if (throttle > 1)
        return;
    throttle++;
    setTimeout(function () { throttle = 0; }, 1000);
于 2013-07-06T14:05:14.397 に答える