<div class="wrap">

        <!-- 用于做碰撞检测的一个元素 -->

        <div class="box"></div>

    </div>

 body {

            margin:;

            padding:;

        }

        .wrap {

            width: 100vw;

            height: 100vh;

            background-color: rgb(228, 243, 248);

        }

        .box {

            width: 70px;

            height: 70px;

            background-color: green;

            border-radius: 50%;

            position: fixed;

            top:;

            left:;

        }

        .wrap .item {

            position: fixed;

            border-radius: 50%;

        }

let wrap = document.querySelector('.wrap');

        let box = document.querySelector('.box');

        // 随机数函数

        function rn(a, b) {

            return Math.round(Math.random() * (a - b) + b);

        }

        // 创建其他小球的函数

        function create() {

            // 创建div

            let el = document.createElement('div');

            // 从20-100之间随机一个数作为小球的宽高（要是圆形，所以宽高相同）

            let w = rn(20, 80);

            el.style.width = w + 'px';

            el.style.height = w + 'px';

            // 设置top left值 该元素css有固定定位

            //可以选择把最大值设置为当前屏幕/父级宽高，然后减去元素最大随即宽度（80）

            el.style.top = rn(0, 500) + 'px';

            el.style.left = rn(0, 1200) + 'px';

            // 追加item作为类名

            el.className = 'item';

            // 获取0-1之间的随机数并取小数点后一位

            let opa = Math.random().toFixed(1);

            // 设置随机颜色

            // 不能先给一个变量随机0-254，然后拼接变量，拼接出来red green blue颜色都一样

            el.color = 'rgba(' + rn(0, 254) + ',' + rn(0, 254) + ',' + rn(0, 254) + ',' + opa + ')';

            el.style.background = el.color;

            // 元素追加给wrap

            wrap.appendChild(el);

        }

        // 利用循环创建20个小球

        function balls() {

            for (let i = 0; i < 20; i++) {

                create();

            }

        }

        balls();

        // box半径(理论上写一个就好，是个正方形画出来的圆嘛~)

        let r1 = box.offsetWidth / 2;

        // 获取创建的小球们

        let item = document.querySelectorAll('.item');

        // console.log(item);

        // 文档注册鼠标移动事件

        document.onmousemove = function (ev) {

            let e = ev || event;

            // 获取浏览器宽度/高度，减去要检测的盒子宽高一半

            let x = e.clientX - r1;

            let y = e.clientY - r1;

            // 设为要拿去做检测的盒子左边，上边

            // 鼠标移动的时候改变要拿去做碰撞检测的元素的top left值（改变位置，让他动起来，动的范围是整个可视页面-自己宽高，不会卡一半在外面）

            box.style.left = x + 'px';

            box.style.top = y + 'px';

            for (let i = 0; i < item.length; i++) {

                // item的半径

                let r2 = item[i].offsetHeight / 2;

                // 生成的小球的左边+半径，减用来检测的元素的左边+半径(两个球圆心距)

                let leftC = item[i].offsetLeft + r2 - (box.offsetLeft + r1);

                // 生成的小球上边加半径-检测小球的上边加半径

                let topC = item[i].offsetTop + r2 - (box.offsetTop + r1);

                // pow() 方法可返回 x 的 y 次幂的值。

                // sqrt() 方法可返回一个数的平方根。

                // 水平方向圆心距的2次幂 +  垂直方向的圆心距2次幂，的平方根（勾股定理？）

                let dis = Math.sqrt(Math.pow(leftC, 2) + Math.pow(topC, 2));

                // 求出来的值小于检测的两个球的半径的和，碰撞上了，生成的小球变色

                if (dis < r1 + r2) {

                    item[i].style.background = 'red';

                } else {

                    item[i].style.background = item[i].color;

                }

            }

        };