ソースコード

// クラス
// 猫オブジェクトを作るための雛形（みたいなもの）
class Cat {
  constructor(x, y, direction) {
    this.x = x;
    this.y = y;
    this.direction = direction;
  }
}

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

const image = new Image();
image.src = "pipo-charachip010a.png";
image.addEventListener("load", () => {

  // 猫オブジェクトの作成
  // クラス名の前に new という命令をつけて、関数のようによびだす
  // Catクラスの中に書かれたconstructorという関数（みたいなもの）が実行される
  const momo = new Cat(7, 2, 0);
  const coco = new Cat(2, 3, 2);
  const nana = new Cat(6, 9, 1);
  const jiji = new Cat(1, 7, 3);

  // 猫オブジェクトを入れておく配列
  const cats = [];

  cats.push(momo);
  cats.push(coco);
  cats.push(nana);
  cats.push(jiji);

  // 配列catsに入っている猫を順に表示する
  cats.forEach(cat => {
    const x = cat.x * 32;
    const y = cat.y * 32;
    context.drawImage(image, 0, cat.direction * 32, 32, 32, x, y, 32, 32);
  });
});