Pure JS to write a win screen saver _ running ball

Effect preview:

This is an effect I saw on the Internet. I think it is still very good. I studied the source code and shared it with you today. It is actually very simple.

Briefly describe the principle:

The first is to use CSS to draw a number of circles in the div created by the dom. The size of the circle is a random number, the number of circles is also randomly set, and of course the color is also random.

The last step is the movement speed, and then get the width and height of the screen. The next step is to make the ball move. When the boundary value is reached, it changes the direction and executes the function of the movement of fn in a loop.

Source code:

   .ball {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background: radial-gradient(circle, #fff, #fff600);
            border-radius: 50%;
        }

// create [1,11) balls
        var mdAttr = document.createDocumentFragment();
        var OBall = [];//Array of small ball objects
        for (var i = 0; i < random(5,20); i++) {
            OBall[i] = document.createElement("div");
            OBall[i].setAttribute("class", "ball");
            var cirR = random(80,100);//The radius of the ball
            OBall[i].style.width = cirR * 2 + "px";
            OBall[i].style.height = cirR * 2 + "px";
            OBall[i].style.background = "radial-gradient(circle," + randomColor() + "," + randomColor() + ")";
            mdAttr.appendChild(OBall[i]);
            OBall[i].startX = random(1,10);//The initial position X can set the position by itself, not necessarily from the upper left corner
            OBall[i].startY = random(1,10);//Initial position Y  
            OBall[i].Vx = random(3,10);//The speed of the horizontal increase distance is randomly increased, otherwise there is no random effect
            OBall[i].Vy = random(3,10);//Increase the distance vertically
        }
        document.body.appendChild(mdAttr);

        //Get the width and height of the browser window
        var W,H;
        window.onresize = (function(){
            W = window.innerWidth,
            H = window.innerHeight;
        })();


        //Motion~ ! void + a= (function fn())
         ~ function fn() {
            OBall.forEach(function (ball) {
                var MaxH = H - ball.offsetHeight,//Get the maximum value of the ball position, so as not to exceed the boundary
                    MaxW = W - ball.offsetWidth;
                ball.startX += ball.Vx;//Change the position of the ball
                ball.startY + = ball.Vy;
                if(ball.startX >= MaxW || ball.startX <=0){//If the ball position exceeds the maximum and minimum values, change the direction
                    ball.Vx *= -1;
                    ball.style.background = "radial-gradient(circle," + randomColor() + "," + randomColor() + ")";
                    ball.startX = Math.max(0,ball.startX);
                    ball.startX = Math.min(ball.startX,MaxW);
                }
                if(ball.startY >= MaxH || ball.startY <=0){
                    ball.Vy *= -1;
                    ball.style.background = "radial-gradient(circle," + randomColor() + "," + randomColor() + ")";
                    ball.startY = Math.max(0,ball.startY);
                    ball.startY = Math.min(ball.startY,MaxW);
                }
                ball.style.left = ball.startX + "px";//Set the current position of the ball
                ball.style.top = ball.startY + "px";
            });
            requestAnimationFrame(fn);//loop
        }();

        //Random Color
        function randomColor() {
            var r = Math.floor(Math.random() * 256),
                g = Math.floor(Math.random() * 256),
                b = Math.floor(Math.random() * 256);
            return "rgb(" + r + "," + g + "," + b + ")";
        }
        // Take a random value between [min, max)
        function random(min,max){
            return Math.random(max-min)+min;
        }

The comments of the source code are still very clearly written, and it is still clear to see.