クリックすると正方形の枠の中にボールボールが出現。ボールはランダムに動き枠に当たったら反射する。 3回反射したらボールは1つ増える。増えたボールは上記のボールと同じステータス。枠の下にscoreを表示。 scoreにはボールの数を表示する

以下は、JavaScriptとCSSを使った、ボールが2回反射したら1つ増えるゲームの実装例です。アルゴリズムが異なる場合があるため、クライアントの具体的な要望に対応するため、この実装例をそのまま使うのではなく、必要に応じて改変してください。また、セキュリティ脆弱性を考慮しており、evalや他のサイトへの遷移、リダイレクトは含んでいません。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Bouncing Balls Game</title>
  <style>
    #canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>

  <canvas id="canvas" width="400" height="400"></canvas>
  <div id="score"></div>

  <script>
    // オブジェクトの作成
    function Ball(x, y, dx, dy) {
      this.x = x;
      this.y = y;
      this.dx = dx;
      this.dy = dy;
      this.radius = 10;
    }

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    var balls = [];
    var score = 0;

    setInterval(function() {
      // ボールを描画
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      for (var i = 0; i < balls.length; i++) {
        ctx.beginPath();
        ctx.arc(balls[i].x, balls[i].y, balls[i].radius, 0, Math.PI * 2);
        ctx.fill();
        ctx.closePath();
      }

      // ボールの移動
      for (var i = 0; i < balls.length; i++) {
        balls[i].x += balls[i].dx;
        balls[i].y += balls[i].dy;

        // 壁に当たった場合の反射
        if (balls[i].x < balls[i].radius || balls[i].x > canvas.width - balls[i].radius) {
          balls[i].dx *= -1;
        }
        if (balls[i].y < balls[i].radius || balls[i].y > canvas.height - balls[i].radius) {
          balls[i].dy *= -1;
        }

        // 他のボールに当たった場合の反射
        for (var j = 0; j < balls.length; j++) {
          if (i != j) {
            var dx = balls[i].x - balls[j].x;
            var dy = balls[i].y - balls[j].y;
            var distance = Math.sqrt(dx * dx + dy * dy);
            if (distance < balls[i].radius + balls[j].radius) {
              balls[i].dx *= -1;
              balls[i].dy *= -1;
              balls[j].dx *= -1;
              balls[j].dy *= -1;
            }
          }
        }
      }

      // スコア更新
      score = balls.length;
      document.getElementById("score").innerHTML = "Score: " + score;

      // ボールの増加
      var newBalls = [];
      for (var i = 0; i < balls.length; i++) {
        if (balls[i].reflectCount >= 2) {
          newBalls.push(new Ball(balls[i].x, balls[i].y, balls[i].dx * -1, balls[i].dy));
          newBalls.push(new Ball(balls[i].x, balls[i].y, balls[i].dx, balls[i].dy * -1));
          balls.splice(i, 1);
        }
        else {
          balls[i].reflectCount = (balls[i].reflectCount || 0) + 1;
        }
      }
      balls = balls.concat(newBalls);
    }, 1000 / 60);

    // クリック時のイベントハンドラ
    canvas.addEventListener("click", function(event) {
      var x = event.pageX - canvas.offsetLeft;
      var y = event.pageY - canvas.offsetTop;
      balls.push(new Ball(x, y, Math.random() * 4 - 2, Math.random() * 4 - 2));
    });
  </script>

</body>
</html>
```

※今回上記のアルゴリズムでは、あるボールが2回反射したら分裂するため、一回反射したボールを追加した場合、分裂することがなくなる点に気を付けてください。