JavaScript»ゲーム制作»keydownとkeyup 十字キーで戦闘機をスムーズにうごかす

ファイル名: js-game/quest_00765.html

下のプログラムをうつして、上下左右のキーをおしている間ずっと戦闘機せんとうきがうごくようにしてください。上下左右のキーがおされているときに戦闘機せんとうきがどのようにうごくかは、戦闘機せんとうきに関することなので、Fighterクラスに書きます。

画像がぞうは下のリンクからダウンロードできます。

画像をダウンロード

ソースコード

class Fighter {

  constructor(image, x, y) {
    this.image = image;
    this.x = x;
    this.y = y;
  }

  // キー入力をうけとる
  update(input) {
    if (input["ArrowUp"]) this.y -= 3;
    if (input["ArrowRight"]) this.x += 3;
    if (input["ArrowDown"]) this.y += 3;
    if (input["ArrowLeft"]) this.x -= 3;
  }

  render(context) {
    context.drawImage(this.image, 325, 0, 98, 75, this.x, this.y, 32, 32);
  }

}

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

const image = new Image();
image.src = "spaceshooter.png";
image.addEventListener("load", (e) => {

  const fighter = new Fighter(image, 144, 144);

  // どのキーが押されているかを格納するオブジェクト
  const input = {};

  // キーが押し込まれたらそのキーの名前のプロパティ値をtrueにし、
  // キーが離されたらfalseにする
  // たとえば上矢印キーが押されている間は input["ArrowUp"] === true となる
  addEventListener("keydown", e => input[e.key] = true);
  addEventListener("keyup", e => input[e.key] = false);

  const FPS = 60;
  const frameTime = 1 / FPS;
  let prevTimestamp = 0;

  const update = (timestamp) => {

    const elapsed = (timestamp - prevTimestamp) / 1000;
    if (elapsed <= frameTime) {
      requestAnimationFrame(update);
      return;
    }

    prevTimestamp = timestamp;

    // updateには、キー入力情報がはいった input を引数にして渡す
    fighter.update(input);

    context.fillStyle = "#000";
    context.fillRect(0, 0, 320, 320);
    fighter.render(context);

    requestAnimationFrame(update);
  };

  update();
});

解説

十字キーで戦闘機をうごかす」ではkeydownイベントでswitch文を実行していました。
今回はFighterクラスのupdateメソッドで座標情報を変化させます。updateメソッドは引数inputを使います。
inputはキーが押されたとき・離されたときに変化します(38・39行目)。
番号の代わりにキーの名前で要素を呼び出す配列をイメージするとわかりやすいかもしれません。