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