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

需求：生成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," + 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>

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

相关文章