原生js生成气泡碰撞,随机生成颜色

最新推荐文章于 2024-06-16 09:43:45 发布
陌寒1024
最新推荐文章于 2024-06-16 09:43:45 发布
阅读量423
点赞数 1
文章标签： js
本文链接：https://blog.csdn.net/qq_45729353/article/details/117750277
版权
原生js生成气泡碰撞,随机生成颜色

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        #main {
            margin: 0 auto;
            position: relative;
            background-color: #fff
        }

        #main div {
            position: absolute;
            width: 100px;
            height: 100px;
            overflow: hidden;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            background-color: chartreuse;
            /* background-image: url("img/blue.png");
            background-repeat: no-repeat; */
        }

        #red {
            display: block;
            width: 120px;
            height: 120px;
            position: absolute;
            left: calc(50% - 60px);
            top: calc(50% - 60px);
            background-color: brown;
            background-size: cover;
            border-radius: 50%;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%
        }
    </style>
</head>

<body>
    <div id="main">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <script>
        var main = document.getElementById('main');  //获取运动边界和10个div
        var circles = main.getElementsByTagName('div');
        // 每次Math.random调用都会产生全新的随机数;

        console.log('-------', main.getElementsByTagName('div'));

        // circles.forEach(element => {
        //     // element.style.backgroundColor = random_color;
        //     element.style.cssText = "background:" + random_color
        // });
        for (let i = 0; i < circles.length; i++) {
            var r = parseInt(256 * Math.random()); //小于 255 254.xxxxxx
            var g = parseInt(256 * Math.random());
            var b = parseInt(256 * Math.random()); // 随机颜色 ;  => 字符串;
            var random_color = "rgb(" + r + "," + g + "," + b + ")";
            circles[i].style.cssText = "background:" + random_color;
        }
        var container = [];//存放10个球的每个具体信息，包括坐标，速度等值
        var arr = [];
        var maxW = 0;//初始化运动的最大宽和高，初始定义0
        var maxH = 0;
        var cwidth = circles[0].offsetWidth; //小球的直径


        //根据浏览器窗口的大小自动调节小球的运动空间
        window.onresize = function () {
            // maxW = window.innerWidth - circles[0].clientWidth;  //为了让小球不卡在浏览器边缘，
            maxW = 500 - circles[0].clientWidth;  //为了让小球不卡在浏览器边缘，
            // maxH = window.innerHeight - circles[0].clientHeight;    // 所以要减去自身的宽高
            maxH = 500 - circles[0].clientHeight;    // 所以要减去自身的宽高
            main.style.width = 500 + 'px';   //将容器的宽高和文档显示区宽高相等
            main.style.height = 500 + 'px';
        };
        onresize();
        //数组对象的初始化
        for (var i = 0; i < circles.length; i++) {
            arr = [];
            arr.x = Math.floor(Math.random() * (maxW + 1));//初始x坐标
            arr.y = Math.floor(Math.random() * (maxH + 1));//初始y坐标
            arr.cx = arr.x + circles[0].offsetWidth / 2;//圆心x坐标
            arr.cy = arr.y + circles[0].offsetHeight / 2;//圆心y坐标
            arr.movex = Math.floor(Math.random() * 2);//x轴移动方向
            arr.movey = Math.floor(Math.random() * 2);//y轴移动方向
            // arr.speed = 2 + Math.floor(Math.random() * 4);//随机速度
            arr.speed = 0.5//随机速度
            arr.timer = null;//计时器
            arr.index = i;//索引值
            container.push(arr); //存放所有的属性值
            circles[i].style.left = arr.x + 'px';//小球位置初始化
            circles[i].style.top = arr.y + 'px';
        }

        //碰撞函数
        function crash(a) {
            var ball1x = container[a].cx; //在数组中任意球的圆心坐标
            var ball1y = container[a].cy;//思路：先随便拿一个球，然后遍历所有球，拿这个球和所有球的圆心距离比较
            for (var i = 0; i < container.length; i++) {
                if (i !== a) { //判断取出来的球不是本身，才能和其他球进行距离判断
                    var ball2x = container[i].cx; //将其他球的圆心坐标赋值给球2
                    var ball2y = container[i].cy;
                    //圆心距 求两个点之间的距离,开平方
                    var distence = Math.sqrt((ball1x - ball2x) * (ball1x - ball2x) + (ball1y - ball2y) * (ball1y - ball2y));
                    if (distence <= cwidth) { //球心距离和求直径比较
                        if (ball1x > ball2x) { //当前位于未知求的右方
                            if (ball1y > ball2y) {//预设未知球撞当前球，然后当前球改变运动
                                container[a].movex = 1; //1表示为正值，对应的右和下
                                container[a].movey = 1;//0表示为负值，对应的左和上
                            } else if (ball1y < ball2y) {
                                container[a].movex = 1;
                                container[a].movey = 0;
                            } else {
                                container[a].movex = 1;
                            }
                        } else if (ball1x < ball2x) {
                            if (ball1y > ball2y) {
                                container[a].movex = 0;
                                container[a].movey = 0;
                            } else if (ball1y < ball2y) {
                                container[a].movex = 0;
                                container[a].movey = 1;
                            } else {
                                container[a].movex = 0;
                            }
                        } else {
                            if (ball1y > ball2y) {
                                container[a].movey = 1;
                            } else if (ball1y < ball2y) {
                                container[a].movey = 0;
                            }
                        }
                    }
                }

            }
        }

        //移动函数
        function move(balls) { //每个球单独有定时器
            balls.timer = setInterval(function () {
                if (balls.movex === 1) { //如果往右跑，则一直加速度，碰到边界，改为反方向运动
                    balls.x += balls.speed;
                    if (balls.x + balls.speed >= maxW) {//防止小球出界
                        balls.x = maxW;
                        balls.movex = 0;//小球运动方向发生改变
                    }
                } else {
                    balls.x -= balls.speed; // 1和0表示正反方向
                    if (balls.x - balls.speed <= 0) {
                        balls.x = 0;
                        balls.movex = 1;
                    }
                }
                if (balls.movey === 1) {
                    balls.y += balls.speed;
                    if (balls.y + balls.speed >= maxH) {
                        balls.y = maxH;
                        balls.movey = 0;
                    }
                } else {
                    balls.y -= balls.speed;
                    if (balls.y - balls.speed <= 0) {
                        balls.y = 0;
                        balls.movey = 1;
                    }
                }
                balls.cx = balls.x + circles[0].offsetWidth / 2;//小球圆心等于：运动中x的值加上自身的半径
                balls.cy = balls.y + circles[0].offsetHeight / 2;
                circles[balls.index].style.left = balls.x + 'px';//小球相对于屏幕的位置
                circles[balls.index].style.top = balls.y + 'px';
                crash(balls.index); //每个小球进行碰撞检测
            }, 25);
        }

        //对每一个小球绑定计时器，让小球动起来
        for (var i = 0; i < container.length; i++) {
            move(container[i]);
        }
    </script>
</body>

</html>
在这里插入图片描述
陌寒1024
关注
1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
原生js生成气泡碰撞,随机生成颜色

原生js生成气泡碰撞,随机生成颜色<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0 } #main {
复制链接

扫一扫