ソースコード

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);
});