ソースコード

class Bubble {

  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.radius = 0;
  }

  // バブルをすこし大きくするメソッド enlarge
  enlarge() {
    this.radius += 1;
  }

  // 引数で指定した数だけバブルを上にうごかすメソッド rise
  rise(dy) {
    this.y -= dy;
  }
}

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.fillStyle = "rgb(0, 191, 255)";

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

// 200ミリ秒ごとに新しい泡オブジェクトを作って配列 bubbles に入れる
setInterval(() => {
  const x = Math.floor(Math.random() * (320 - 32));
  const y = Math.floor(Math.random() * 320);
  bubbles.push(new Bubble(x, y));
}, 200);

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

  context.clearRect(0, 0, 320, 320);
  
  // 配列bubblesに入っているバブルを順に表示する
  bubbles.forEach(b => {
    context.beginPath();
    context.arc(b.x, b.y, b.radius, 0, Math.PI * 2);
    context.fill();
    b.rise(2);
    b.enlarge();
  });

  // 半径が32以上になったバブルは配列から取りのぞく
  bubbles = bubbles.filter(bubble => bubble.radius < 32);
};

setInterval(repaint, 25);