JavaScript»基礎»オブジェクト クロネコをたくさん表示する

ファイル名: js-basic/quest_00624.html

下のソースコードをうつして、4ひきのクロネコをキャンバスに表示ひょうじしてください。画像がぞうは下のリンクからダウンロードできます。

画像をダウンロード

ソースコード

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

const image = new Image();
image.src = "pipo-charachip010a.png";
image.onload = function() {

  // 猫オブジェクト
  // x: 猫を表示するキャンバス上の位置。
  //    キャンバス幅320に対して猫幅32なので、位置を10段階に分け、0〜9 の数値で表す
  // direction: 猫の向き。数値で 0:前, 1:左, 2:右, 3:後 とする
  const momo = {
    x: 7,
    y: 2,
    direction: 0
  };

  const coco = {
    x: 2,
    y: 3,
    direction: 2
  };

  const nana = {
    x: 6,
    y: 9,
    direction: 1
  };

  const jiji = {
    x: 1,
    y: 7,
    direction: 3
  };

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

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

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

解説

いくつかのデータをひとまとめにしたものを、オブジェクトといい、次のように書きます。

{
  name: "みつを",
  age: 6,
  species: "ねこ"
}

これは、ある1ぴきのネコをあらわしているオブジェクトで、name, age, speciesという3つのデータをもっています。これらのデータのことを「プロパティ」などと言います。「このオブジェクトのageプロパティの値は12である」のような言葉の使いかたをします。

次のように、オブジェクトを変数に代入できます。

const neko = {
  name: "みつを",
  age: 6,
  species: "ねこ"
};

変数名（この例では neko ）は、自由につけることができますが、これが1ぴきの猫をあらわしているということがわかりやすい名前にします。cat でもよいし、「みつを」という名前の特定の猫のオブジェクトだから mitsuwo でもよいし、複数の猫オブジェクトを扱う場合は、その中の1ぴきということで neko1 と番号をつけてもよいです。

変数に代入したオブジェクトのプロパティは、次のように扱います。

// 変数nekoには前述の猫オブジェクトがはいっているとする

// プロパティの値をアラートで表示する
alert(neko.name);
alert(neko.age + "歳");

// プロパティの値をつかって計算する
const humanAge = neko.age * 6;
alert("人間に換算すると" + humanAge + "歳");

// プロパティの値を変更する
neko.name = "みつを大明神";
neko.age = 255;