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

最新推荐文章于 2024-08-16 09:58:09 发布

森屿海港-

最新推荐文章于 2024-08-16 09:58:09 发布

阅读量897

点赞数 2

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

本文链接：https://blog.youkuaiyun.com/weixin_45163951/article/details/119786949

版权

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

4 篇文章

订阅专栏

"本文展示了一个使用HTML5 Canvas实现的多小球碰撞动画效果。通过添加和调整HTML中的<div class="ball"></div>元素，可以轻松改变小球数量和速度。JavaScript代码实现了小球的随机生成、颜色、大小以及碰撞后的反弹效果，通过定时器不断更新小球位置，创造出动态的视觉体验。"

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何实现下图功能

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

只需要在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>