SOURCE

var width = 500,
            height = 300;
        var canvas = document.getElementById("canvas");
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = "#000";
        ctx.fillRect(0, 0, width, height);
        var ballArry = [];
        var arc_r = 20;
        var mg = 10;

        function ball(x, y, _x, _y, mg, color) {
            this.x = x;
            this.y = y;
            this._x = _x;
            this.r = arc_r;
            this._y = _y;
            if (color) {
                this.color = color;
            } else {
                this.color = "#fff"
            }

            this.index = ballArry.length;
            this.mg = mg;
            this.draw = function() {
                this.rebound();
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.r, 0, 10 * Math.PI);
                ctx.fillStyle = this.color;
                ctx.fill();
            }
            this.rebound = function() {
                if (this.x - arc_r <= 0 || this.x + arc_r >= width) {
                    this._x = -this._x;
                }
                if (this.y - arc_r <= 0 || this.y + arc_r >= height) {
                    this._y = -this._y;
                }
                this.x += this._x;
                this.y += this._y;
                this.speed = Math.sqrt(_x * _x + _y * _y);
                if (this._x < 0) {
                    this.speed = -this.speed;
                }
            }
        }

        function ballDraw() {
            var length = ballArry.length;
            ballArry.forEach(function(item) {
                item.draw();
                for (var i = item.index + 1; i < length; i++) {
                    // var distance = Math.sqrt(Math.pow(item.x-ballArry[i].x,2) + Math.pow(item.y-ballArry[i].y,2));
                    var isColl = Collision(item.x, item.y, ballArry[i].x, ballArry[i].y);
                    if (isColl) {
                        ballone = ballArry[i];
                        var Vy = Number((item.mg - ballone.mg) / (item.mg + ballone.mg)) * item._y + Number((ballone.mg * 2) / (item.mg + ballone.mg)) * ballone._y;
                        var Vx = Number((item.mg - ballone.mg) / (item.mg + ballone.mg)) * item._x + Number((ballone.mg * 2) / (item.mg + ballone.mg)) * ballone._x;

                        var _Vy = Number((item.mg - ballone.mg) / (item.mg + ballone.mg)) * ballone._y + Number((ballone.mg * 2) / (item.mg + ballone.mg)) * item._y;
                        var _Vx = Number((ballone.mg - item.mg) / (item.mg + ballone.mg)) * ballone._x + Number((item.mg * 2) / (item.mg + ballone.mg)) * item._x;
                        item._x = Vx;
                        item._y = Vy;
                        ballone._x = _Vx;
                        ballone._y = _Vy;
                        // ballone._x = _Vx;
                        // ballone._y = _Vy;
                    }
                }

            })
        }

        function Collision(x1, y1, x2, y2) {
                var distance = Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
                if (distance < 2 * arc_r) {
                    return true;
                }
                return false;
            }
            // function initIsColl(x1,y1){
            //     ballArry.forEach(function(item){
            //         var isColl = Collision(x1, y1, item.x, item.y)
            //     }
            // }
        function start() {
            initBall("#E91E63");
            initBall("#607d8b");
            initBall("#4caf50");
            initBall("#ff5722");
            initBall("#795548");
            initBall("#fcfcfc");
        }
        start();

        function initBall(color) {
                var x = Number.parseInt(Math.random() * (width - arc_r));
                var y = Number.parseInt(Math.random() * (height - arc_r));
                if (x < arc_r) {
                    x = arc_r + x;
                }
                if (x > width - arc_r) {
                    x = width - arc_r - x;
                }
                if (y < arc_r) {
                    y = arc_r + y;
                }
                if (y > height - arc_r) {
                    y = height - arc_r - y;
                }

                var _x = Number(Number.parseFloat(Math.random() * 5));
                var _y = Number(Number.parseFloat(Math.random() * 2));
                var mark = Math.random();
                if (mark > 0 && mark <= 0.25) {
                    _x = -_x;
                    _y = _y;
                }
                if (mark > 0.25 && mark <= 0.5) {
                    _y = -_y;
                    _x = _x;
                }
                if (mark > 0.5 && mark <= 0.75) {
                    _x = -_x;
                    _y = -_y;
                }
          for(var i = 0, i_sz = ballArry.length; i< i_sz; i++){
                    var ballx = ballArry[i];
                    var jl = Math.pow((x-ballx.x),2) + Math.pow((y-ballx.y),2);
                    if(Math.sqrt(jl) <= arc_r*2){
                        initBall(color);
                        return ;
                    }
                }
                // var _y = Number(Math.sqrt(speed*speed-_x*_x).toFixed(2));
                ballArry.push(new ball(x, y, _x, _y, mg, color))
            }
            // function ballDraw(){
            //     // for(var i = 0, i_sz = ballArry.length; i<i_sz; i++){
            //     //     ballArry[i].draw();
            //     // }
            // }
        function initCanvas() {
            ctx.fillStyle = "#000";
            ctx.fillRect(0, 0, width, height);
        }

        function clear() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

        function gameEngine() {
            // switch (current) {
            //     case "PLAY":
            clear();
            initCanvas();
            ballDraw();
            //         break;

            //         break;    
            // } 

        }

        function play() {
            var allNumber = 10000;
            var indexaa = 0;
            var timer = requestAnimationFrame(function fn() {
                if (indexaa < allNumber) {
                    gameEngine();
                    indexaa += 20;
                    timer = requestAnimationFrame(fn);

                } else {
                    indexaa = 0;
                    gameEngine();
                    timer = requestAnimationFrame(fn);
                    // cancelAnimationFrame(timer);
                }
            });
        }
        play()

<canvas id="canvas">
            
</canvas>