JavaScript»オブジェクト指向»メソッド たくさんのクロネコをうろうろさせる

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

下のソースコードに必要なプログラムを書き加えて、たくさんの猫が500ミリ秒ごとにランダムに進む向きを変えてうろうろするプログラムを完成させてください。

ソースコード

class Cat {

  constructor(x, y) {

    this.x = x;
    this.y = y;
    this.tick = 0;

    // 向いている方向を表すプロパティは direction とし、
    // 0〜3の整数(下:0, 左:1, 右:2, 上:3)が値として入るものとします
    this.direction = 0;
    this.turnRandom();
  

  // 上下左右のうちどれかの方向にランダムに向くメソッド turnRandom を、
  // ここに書いてね

  // 今どちらを向いているかによって進む方向が変わる、猫が前進するメソッド moveForward を、
  // ここに書いてね

}

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

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

  // 10匹の新しい猫オブジェクトを作って配列 cats に入れる
  // どの猫も、初期位置は中央
  const cats = [];

  for (let i = 0; i < 20; i++) {
    cats.push(new Cat(144, 144));
  }

  // 500ミリ秒ごとに、すべての猫の向きをランダムに変える
  setInterval(() => {
    cats.forEach(cat => cat.turnRandom());
  }, 500);

  // 25ミリ秒ごとに画面を全部描きなおす
  const repaint = function() {

    context.clearRect(0, 0, 320, 320);
    
    // 配列catsに入っている猫を順に表示する
    cats.forEach(cat => {
      const trimX = (cat.tick % 3) * 32;
      const trimY = cat.direction * 32;
      context.drawImage(image, trimX, trimY, 32, 32, cat.x, cat.y, 32, 32);
      cat.tick++;
      cat.moveForward();
    });
  };
  
  setInterval(repaint, 25);
});

ヒント

turnRandomメソッドはdirectionプロパティの値を変更し、moveForwardメソッドはdirectionプロパティの値に応じて、xまたはyプロパティの値を変更します。