JavaScript»オブジェクト指向»クラス クロネコをたくさん表示する(クラス使用)

ファイル名: js-oop/quest_00643.html

下のプログラムは、「クロネコをたくさん表示する」と同じことを、クラスをつかって書いたものです。これをうつして、4ひきのクロネコをキャンバスに表示ひょうじしてください。画像がぞうは下のリンクからダウンロードできます。

画像をダウンロード

ソースコード

// クラス
// 猫オブジェクトを作るための雛形(みたいなもの)
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);
  });
});

解説

直接オブジェクトを作らずクラスからオブジェクトを作ることで、あらかじめプロパティを統一しておけます。多くのオブジェクトを扱うときに使いやすくなる、入力ミスを防ぐなどのメリットがあります。