多个小球碰撞功能（原生js实现）

最新推荐文章于 2022-12-12 13:47:50 发布

森屿海港-

最新推荐文章于 2022-12-12 13:47:50 发布

阅读量758

点赞数 2

分类专栏： js常见小demo 文章标签： js

本文链接：https://blog.csdn.net/weixin_45163951/article/details/119786949

版权

js常见小demo 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

如何实现下图功能

下面代码可以随意增加小球的数量和速度

只需要在html重加入<div class="ball"></div>

和改变

wrap.children[i].x = 1;

wrap.children[i].y = 1;

的值即可

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <title>多个小球碰撞</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #wrap {
            width: 1000px;
            height: 600px;
            border: 1px solid black;
            margin: 30px auto;
            position: relative;
        }

        .ball {
            width: 50px;
            height: 50px;
            background-color: red;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>

    </div>
</body>
<script>
    var wrap = document.getElementById('wrap');
    // 获取外部容器的可视宽度(不包括边框)
    var wrapWidth = wrap.clientWidth;
    // 获取外部容器的可视高度(不包括边框)
    var wrapHeight = wrap.clientHeight;
    // 定义随意生成一个整数的函数
    function randomNum(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }

    for (var i = 0; i < wrap.children.length; i++) {
        // 定义自定义属性小球的水平方向的一次移动的距离
        wrap.children[i].x = 1;
        // 定义自定义属性小球的水平方向的一次移动的距离
        wrap.children[i].y = 1;
        // 定义一个自定义属性，来存储小球是否为反方向运动 正方向为true,反方向为false 方向随机生成
        wrap.children[i].flagX = randomNum(0,1)?true:false;
        wrap.children[i].flagY = randomNum(0,1)?true:false;
        // 定义每个小球的大小(随机生成)
        wrap.children[i].style.width = randomNum(10, 80) + 'px';
        wrap.children[i].style.height = wrap.children[i].offsetWidth + 'px';
        //小球在随机的高度创建(随机生成)
        wrap.children[i].style.top = randomNum(0, wrapHeight - wrap.children[i].offsetWidth) + 'px';
        //小球在随机的left创建(随机生成)
        wrap.children[i].style.left = randomNum(0, wrapWidth - wrap.children[i].offsetWidth) + 'px';
        // 随机生成每个小球的颜色
        wrap.children[i].style.backgroundColor = `rgb(${randomNum(0,255)},${randomNum(0,255)},${randomNum(0,255)})`;
       

    }
    // 定义x轴运动函数
    function moveX() {
        // for循环遍历每一个小球
        for (var i = 0; i < wrap.children.length; i++) {
            // 判断该flagX是否为TRUE,为真则正方向运动，否则方方向运动
            if (wrap.children[i].flagX) {
                // 正方向运动
                //将每次的小球的距离父盒子左侧的距离加上每次移动的距离赋值给left值
                wrap.children[i].style.left = wrap.children[i].offsetLeft + wrap.children[i].x + 'px';
                // 判断是否小球的运动距离超过盒子外
                if (wrap.children[i].offsetLeft >= wrap.offsetWidth - wrap.children[i].offsetWidth) {
                    // 将其flagX的值变成false,进行反方向运动
                    wrap.children[i].flagX = false;
                }
            } else {
                // 反方向运动
                //将每次的小球的距离父盒子左侧的距离减去每次移动的距离赋值给left值
                wrap.children[i].style.left = wrap.children[i].offsetLeft - wrap.children[i].x + 'px';
                //判断是否触壁
                if (wrap.children[i].offsetLeft <= 0) {
                    wrap.children[i].flagX = true;
                }
            }
        }
    }
    // 定义y轴运动函数
    function moveY() {
        // for循环遍历每一个小球
        for (var i = 0; i < wrap.children.length; i++) {
            // 判断该flagX是否为TRUE,为真则正方向运动，否则方方向运动
            if (wrap.children[i].flagY) {
                // 正方向运动
                //将每次的小球的距离父盒子左上侧的距离加上每次移动的距离赋值给top值
                wrap.children[i].style.top = wrap.children[i].offsetTop + wrap.children[i].y + 'px';
                // 判断是否小球的运动距离超过盒子外
                if (wrap.children[i].offsetTop >= wrap.offsetHeight - wrap.children[i].offsetHeight) {
                    // 将其flagY的值变成false,进行反方向运动
                    wrap.children[i].flagY = false;
                }
            } else {
                // 反方向运动
                //将每次的小球的距离父盒子上侧的距离减去每次移动的距离赋值给top值
                wrap.children[i].style.top = wrap.children[i].offsetTop - wrap.children[i].y + 'px';
                //判断是否触壁
                if (wrap.children[i].offsetTop <= 0) {
                    wrap.children[i].flagY = true;
                }
            }
        }
    }
    setInterval(function () {
        moveX();
        moveY();
    }, 1);
</script>

</html>

森屿海港-

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
多个小球碰撞功能（原生js实现）

如何实现下图功能下面代码可以随意增加小球的数量和速度只需要在html重加入<divclass="ball"></div>和改变wrap.children[i].x=1;wrap.children[i].y=1;的值即可<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>多个...
复制链接

扫一扫

专栏目录