JavaScript»ゲーム制作»keydownイベントでキー入力 十字キーで戦闘機をうごかす

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

下のプログラムをうつして、上下左右のキーをおしたときに戦闘機せんとうきがうごくようにしてください。

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

画像をダウンロード

ソースコード

class Fighter {

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

  update() {
  }

  render(context) {
    context.drawImage(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);

  addEventListener("keydown", e => {
    switch (e.key) {
      case "ArrowUp": fighter.y -= 3; break;
      case "ArrowRight": fighter.x += 3; break;
      case "ArrowDown": fighter.y += 3; break;
      case "ArrowLeft": fighter.x -= 3; break;
    }
  });

  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;

    fighter.update();

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

    requestAnimationFrame(update);
  };

  update();
});

解説

戦闘機をあらわすFighterクラスを用意し、switch文で座標を変化させます。

●switch文とは

switchのあとの()の式と一致するcaseの文を実行します。そのままだと後ろの文も実行するため、breakでswitchを抜け出します。
たとえば、このようにbreakがなかったら、

switch (e.key) {
      case "ArrowUp": fighter.y -= 3;
      case "ArrowRight": fighter.x += 3;
      case "ArrowDown": fighter.y += 3;
      case "ArrowLeft": fighter.x -= 3;
    }

→キーを押すと

case "ArrowRight": fighter.x += 3;

が実行されたあと

case "ArrowDown": fighter.y += 3;
case "ArrowLeft": fighter.x -= 3;

も実行されます。