原生js实现多个随机大小颜色位置速度小球的碰壁反弹

偏执的太偏执、 2023-06-05 08:07 2阅读 0赞

需求：生成n个小球，让他们在一个大盒子中碰壁反弹，要求小球随机颜色，大小，初始位置，运动速度。

思路分析： 创建小球随机颜色等，添加到页面中。然后让小球发生移动。

ps：计时器超级耗性能的qwq

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            .wrap {
                width: 900px;
                height: 500px;
                box-shadow: 0 0 20px black;
                margin: 50px auto;
                position: relative;
                border-radius: 8px;
            }
    
            .wrap div {
                border-radius: 50%;
                position: absolute;
            }
        </style>
    </head>
    
    <body>
        
        <div class="wrap"></div>
        <script>
            var wrap = document.getElementsByClassName("wrap")[0];
    
            //封装随机数函数
            function rn(a, b) {
                return Math.round(Math.random() * (a - b) + b);
            }
    
            // 封装函数创建小球
            function createBall() {
                //创建元素
                var el = document.createElement("div");
                // 随机元素的颜色 大小 速度 位置
                // 随机一个宽高（元素宽高相同）
                el.w = rn(10, 30);
                el.style.width = el.w + "px";
                el.style.height = el.w + "px";
                // 随机透明度，并取小数点后一位
                //不能用之前封装的rn()，因为他四舍五入了，只能取到整数
                var op = Math.random().toFixed(1);
                el.style.backgroundColor = "rgba(" + rn(0, 255) + "," + rn(0, 255) + "," + rn(0, 255) + "," + op + ")";
                // 计算left top 可以到达的最大值
                var ml = wrap.offsetWidth - el.w;
                var mt = wrap.offsetHeight - el.w;
                // 随机生成在wrap中
                // 位置为0 到可使用的最大值
                el.style.left = rn(0, ml) + "px";
                el.style.top = rn(0, mt) + "px";
                // 如果生成的速度为0，让他直接变成1；
                // 或运算符短路操作，前一个值为0，会看后面的值能否决定结果
                // 或运算符只要有一个为真，全都为真
                el.vx = rn(-2, 3) || 1;
                el.vy = rn(-2, 3) || 1;
                //生成元素添加至父元素wrap
                wrap.appendChild(el);
            }
    
            // 封装函数 循环产生多个小球
            function cerateAll() {
                // 创建100个小球
                for (var i = 0; i < 100; i++) {
                    createBall();
                }
            }
            cerateAll();
    
            // 让所有小球发生移动
            function ballMove() {
                // 获取所有小球
                var balls = document.querySelectorAll(".wrap div");
                // 添加计时器
                setInterval(function () {
                    // 实现每个小球的碰壁反弹
                    // 循环遍历所有小球，改变他们的left top值
                    for (var i = 0; i < balls.length; i++) {
                        // 获取小球当前left top
                        // 当前dom节点的操作指针复制给b，不是传递一个值
                        var b = balls[i];
                        var l = b.offsetLeft;
                        var t = b.offsetTop;
    
                        // 设置碰壁条件
                        // 到达父级元素边框，改变运动方向
                        if (l <= 0 || l > wrap.offsetWidth - b.w) {
                            b.vx *= -1;
                        }
                        if (t <= 0 || t >= wrap.offsetHeight - b.w) {
                            b.vy *= -1;
                        }
                        // 在此基础上加上增量 当前的值累加速度 设置为新的left top
                        b.style.left = l + b.vx + "px";
                        b.style.top = t + b.vy + "px";
                    }
                }, 50);
            }
            ballMove();
        </script>
    </body>
    
    </html>

转载于:https://www.cnblogs.com/sandraryan/p/11416801.html