JavaScript»基礎»オブジェクト たくさんのクロネコに横切られる

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

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

画像をダウンロード

ソースコード

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

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

  // 表示中の猫オブジェクトを入れておく配列
  let cats = [];

  // 200ミリ秒ごとに新しい猫オブジェクトを作って配列 cats に入れる
  setInterval(function() {
    const cat = {
      x: 320,
      y: Math.floor(Math.random() * (320 - 32)),
      tick: 0
    };
    cats.push(cat);
  }, 200);

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

    context.clearRect(0, 0, 320, 320);
    
    // 配列catsに入っている猫を順に表示する
    // 同時に、次のレンダリング時に猫がすこし左に動くよう、x座標値を減らしておく
    // 減らす数は、352pxの距離を50回のくりかえしで横切るよう計算する
    cats.forEach(function(cat) {
      context.drawImage(image, (cat.tick % 3) * 32, 32, 32, 32, cat.x, cat.y, 32, 32);
      cat.tick++;
      cat.x -= ((320 + 32) / 50);
    });

    // xが-32以下になった猫は配列から取りのぞく
    cats = cats.filter(function(cat) {
      return cat.x > -32;
    });
  };
  
  setInterval(repaint, 25);
};

解説

新しく猫オブジェクトを作る関数と、画面全部を描きなおすrepaint関数の2つに大きく分けられます。repaint関数を実際に実行しているのは41行目です。