ソースコード

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();
});