ソースコード

class Bubble {
  
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.radius = 0;
    // 新しいバブル作成時にも、ランダムな色を設定しておく
    this.changeColor();
  }
  
  enlarge() {
    this.radius += 1;
  }

  rise(dy) {
    this.y -= dy;
  }

  // ここに、色をランダムに変化させるメソッド changeColor を書いてね

}

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

let bubbles = [];

setInterval(() => {
  const x = Math.floor(Math.random() * (320 - 32));
  const y = Math.floor(Math.random() * 320);
  bubbles.push(new Bubble(x, y));
}, 200);

// 200ミリ秒ごとに全ての泡オブジェクトの色をランダムに変える
// この中でchangeColorメソッドをつかっている
setInterval(() => {
  bubbles.forEach(bubble => bubble.changeColor());
}, 200);

const repaint = function() {

  context.clearRect(0, 0, 320, 320);
  
  bubbles.forEach(b => {
    // バブルを描くときは、colorプロパティの値をfillStyleに設定する
    context.fillStyle = b.color;
    context.beginPath();
    context.arc(b.x, b.y, b.radius, 0, Math.PI * 2);
    context.fill();
    b.rise(2);
    b.enlarge();
  });

  bubbles = bubbles.filter(bubble => bubble.radius < 32);
};

setInterval(repaint, 25);