纯JS写一个win屏幕保护_奔跑的小球

效果预览:


这是我在网上看到的一个效果,觉得还是很不错的,就研究了一下源码,今天给大家分享一下,其实也很简单。

简单的简述一下原理:

首先是用css在dom创建的div里面画一个若干个圆,圆的大小是随机数,圆的数量也是随机设置的,当然颜色也是随机的,

最后是移动速度,然后拿到屏幕的宽高,下一步就是让小球运动起来,达到边界值的时候就改变方向,循环执行fn的运动的函数。

源码:

   .ball {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background: radial-gradient(circle, #fff, #fff600);
            border-radius: 50%;
        }
 // 创建[1,11)个小球
        var mdAttr = document.createDocumentFragment();
        var OBall = [];//小球对象数组
        for (var i = 0; i < random(5,20); i++) {
            OBall[i] = document.createElement("div");
            OBall[i].setAttribute("class", "ball");
            var cirR = random(80,100);//小球半径
            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);//初始位置X  可以自己设置位置,不一定是非要从左上角
            OBall[i].startY = random(1,10);//初始位置Y  
            OBall[i].Vx = random(3,10);//水平增加距离    这个速度是随机增加的,不然没有随机的效果
            OBall[i].Vy = random(3,10);//垂直增加距离
        }
        document.body.appendChild(mdAttr);

        //获取浏览器窗口宽高
        var W,H;
        window.onresize = (function(){
            W = window.innerWidth,
            H = window.innerHeight;
        })();


        //运动  ~ ! void +  a=  (function fn())
         ~ function fn() {
            OBall.forEach(function (ball) {
                var MaxH = H - ball.offsetHeight,//获取小球位置的最大值,以免超过边界
                    MaxW = W - ball.offsetWidth;
                ball.startX += ball.Vx;//改变小球位置
                ball.startY += ball.Vy;
                if(ball.startX >= MaxW || ball.startX <=0){//若小球位置超出最大值和最小值就改变方向
                    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";//设置小球当前位置
                ball.style.top = ball.startY + "px";
            });
            requestAnimationFrame(fn);//循环
        }();

        //颜色随机
        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 + ")";
        }
        //取[min,max)之间的随机值
        function random(min,max){
            return Math.random(max-min)+min;
        }

源码的注释写的还是很清楚的,看还是看的明白的。


好的,以下是一个简单的小球碰撞网页动画的实现,使用了HTML、CSS和JavaScript: HTML代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小球碰撞</title> <style> body { margin: 0; padding: 0; overflow: hidden; } .ball { position: absolute; border-radius: 50%; background-color: red; width: 50px; height: 50px; } </style> </head> <body> <div class="ball" id="ball1"></div> <div class="ball" id="ball2"></div> <script src="collision.js"></script> </body> </html> ``` CSS代码: ```css .ball { top: 100px; left: 100px; } ``` JavaScript代码: ```javascript var ball1 = document.getElementById("ball1"); var ball2 = document.getElementById("ball2"); var ball1X = ball1.offsetLeft + ball1.offsetWidth / 2; // 球1的中心点x坐标 var ball1Y = ball1.offsetTop + ball1.offsetHeight / 2; // 球1的中心点y坐标 var ball2X = ball2.offsetLeft + ball2.offsetWidth / 2; // 球2的中心点x坐标 var ball2Y = ball2.offsetTop + ball2.offsetHeight / 2; // 球2的中心点y坐标 var dx = 5; // 球的水平方向速度 var dy = 5; // 球的垂直方向速度 function move() { // 更新球的位置 ball1X += dx; ball1Y += dy; ball2X -= dx; ball2Y -= dy; // 更新球的CSS样式 ball1.style.left = ball1X - ball1.offsetWidth / 2 + "px"; ball1.style.top = ball1Y - ball1.offsetHeight / 2 + "px"; ball2.style.left = ball2X - ball2.offsetWidth / 2 + "px"; ball2.style.top = ball2Y - ball2.offsetHeight / 2 + "px"; // 碰撞检测 var distance = Math.sqrt(Math.pow(ball1X - ball2X, 2) + Math.pow(ball1Y - ball2Y, 2)); // 计算球心距离 if (distance <= ball1.offsetWidth / 2 + ball2.offsetWidth / 2) { // 如果两个球相撞 dx = -dx; // 水平速度取反 dy = -dy; // 垂直速度取反 } // 循环调用自身 requestAnimationFrame(move); } move(); ``` 效果截图: ![小球碰撞](https://img-blog.csdnimg.cn/20211103112312558.gif)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

是悟能了

阅读就是对我最大的支持,感谢

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值