2

ここに私の問題があります: http://testepi.kvalitne.cz/test/

キーを押してから四角形が動くまでの遅延は望ましくありません。斜めに移動する方法も知りたいです（2つのキーを同時に押す）。

私のコード:

$(function(){

document.addEventListener("keydown", move, false);

var x = 0;
var y = 0;

function move(event){
  if(event.keyCode==37){
        x -= 10;
  $("#square").css("left", x);
  }

  if(event.keyCode==39){
        x += 10;
  $("#square").css("left", x);
  }

  if(event.keyCode==38){
        y -= 10;
  $("#square").css("top", y);
  }

  if(event.keyCode==40){
        y += 10;
  $("#square").css("top", y);
  }

}

});
4

3 に答える 3

7

まず、キー押下/繰り返しの遅延を回避するために、プログラムをループでラップし、そのループのスコープ内でキーボードの状態を利用できるようにする必要があります。次に、個々のキーダウンとキーアップを追跡する必要がある複数のキー押下を監視する必要があります。イベント：

var x = 0;
var y = 0;

// store the current pressed keys in an array
var keys = [];

// if the pressed key is 38 (w) then keys[38] will be true
// keys [38] will remain true untill the key is released (below)
// the same is true for any other key, we can now detect multiple
// keypresses
$(document).keydown(function (e) {
    keys[e.keyCode] = true;
});

$(document).keyup(function (e) {
    delete keys[e.keyCode];
});
// we use this function to call our mainLoop function every 200ms
// so we are not relying on the key events to move our square
setInterval( mainLoop , 200 );

function mainLoop() {
     // here we query the array for each keyCode and execute the required actions
     if(keys[37]){
        x -= 10;
        $("#square").css("left", x);
     }

     if(keys[39]){
        x += 10;
        $("#square").css("left", x);
     }

     if(keys[38]){
        y -= 10;
        $("#square").css("top", y);
     }

     if(keys[40]){
        y += 10;
        $("#square").css("top", y);
     }
}
于 2012-06-25T21:04:21.443 に答える
1

ゲームのような2Dスプライトの動きを実装しようとしている場合は、キーを押したときにスプライトを一定量動かすのではなく、xとyの速度の概念を使用することをお勧めします。

したがって、キーを押すと、xまたはyの速度に加算または減算します。

var xvel = 0,
    yvel = 0,
    x = 0,
    y = 0;

setInterval(function () {
                 y += yvel;
                 x += xvel;
                 $("#square").css("left", x);
                 $("#square").css("top", y);
            }, 16); //run an update every 16 millis

document.addEventListener("keydown", move, false);

function move(event){
  if(event.keyCode==37){
        xvel -= 10;
  }

  if(event.keyCode==39){
        xvel += 10;
  }

  if(event.keyCode==38){
        yvel -= 10;
  }

  if(event.keyCode==40){
        yvel += 10;
  }

}

ただし、キーアップイベントについても心配する必要があります。これは、キャンセルするまでベロシティが維持されるためです。

を使用setIntervalして、xミリ秒ごとにスプライトの位置を更新できます。（ゲームダニ）

斜めに移動するには、xとyの両方の速度を同時に加算/減算します。

これは単なる例ですが、スプライトの動きについては他にも例があります。

于 2012-06-25T21:08:47.180 に答える
0

ここを見ましたか？複数のキーが押されていないかどうかを確認することで、斜めの移動ができるはずです。

于 2012-06-25T21:39:55.230 に答える