3

私はプログラミングが初めてで、矢印キーを押してキャンバスの周りに正方形を移動できるコードを作成しようとしています。正方形を動かすことはできますが、その動きはあまりスムーズではありません。一度に 10 ピクセルずつ移動させているので、10 フレームの差の各位置の間にアニメーションがないため、ぎくしゃくした感じがする理由は理解できますが、より小さな増分で移動させると遠くまで移動できます。遅すぎる。私がこれまでに行ったことは以下のとおりです。

window.onload = function init() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    setInterval(gameLoop,50);
    window.addEventListener('keydown',whatKey,true);
}

avatarX = 400
avatarY = 300

function gameLoop() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = 800
    canvas.height = 600
    ctx.fillRect(avatarX,avatarY,50,50);
}

function whatKey(e) {
    switch(e.keyCode) {
    case 37:
        avatarX = avatarX - 10;
        break;
    case 39:
        avatarX = avatarX + 10;
        break;
    case 40:
        avatarY = avatarY + 10;
        break;
    case 38:
        avatarY = avatarY - 10;
        break;
    }
}

矢印キーを右に押すたびに、正方形がその方向に一定の速度でスムーズに移動するようにします。助けてくれてありがとう！

4

1 に答える 1

13

いくつかのことを追加しました。最初requestAnimationFrame の理由はここで説明されています。

keyup次に、 andイベント ハンドラーを追加しましたkeydown。これらは、配列を使用して現在プッシュされているキーを追跡します。配列内のキーが true の場合、現在プッシュされています。false の場合はそうではありません。この方法では、複数のキーを同時に押し続けることもできます。

次に、押されたものに基づいて増減する速度変数とmaxSpeed、特定の速度より速くならないようにする変数を追加しました。変数はmaxSpeed削除でき、インクリメントとデクリメントvelXもvelY削除できます。残した行のコメントを外すだけで済みます。10 では速すぎるように思えたので、段階的なスピードアップを追加しました。

ライブデモ

キャンバスが少し苦いため、フレームが上下の矢印でスクロールしているため、上記はぎくしゃくしたように見えます。フルスクリーンリンクを使用して、動きを完全にテストしてください。

全画面リンク

(function () {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();


window.onload = function init() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  gameLoop();
}

window.addEventListener("keydown", function (e) {
  keys[e.keyCode] = true;
});
window.addEventListener("keyup", function (e) {
  keys[e.keyCode] = false;
});


var avatarX = 400,
  avatarY = 300,
  velX = 0,
  velY = 0,
  keys = [],
  maxSpeed = 10;

function gameLoop() {
  whatKey();
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  canvas.width = 800;
  canvas.height = 600;

  avatarX += velX;
  avatarY += velY;

  ctx.fillRect(avatarX, avatarY, 50, 50);
  requestAnimationFrame(gameLoop);
}

function whatKey() {
  if (keys[37]) {
    //velX = -10;
    if (velX > -maxSpeed) {
      velX -= 0.5;
    }
  }

  if (keys[39]) {
    //velX = 10;
    if (velX < maxSpeed) {
      velX += 0.5;
    }
  }
  if (keys[40]) {
    //velY = 10;
    if (velY < maxSpeed) {
      velY += 0.5;
    }
  }
  if (keys[38]) {
    //velY = -10;
    if (velY > -maxSpeed) {
      velY -= 0.5;
    }
  }
}
于 2013-01-06T04:31:31.050 に答える