js实现圆形的碰撞检测

Posted 2021-03-25 颜汐

文章地址：https://www.cnblogs.com/sandraryan/

碰撞检测这个东西写小游戏挺有用der~~~

注释写的还挺全，所以就不多说了，看注释

这是页面结构。wrap存放生成的小球

box是用来检测的元素

<div class="wrap">
        <!-- 用于做碰撞检测的一个元素 -->
        <div class="box"></div>
    </div>

css：

 body {
            margin: 0;
            padding: 0;
        }

        .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: 0;
            left: 0;
        }

        .wrap .item {
            position: fixed;
            border-radius: 50%;
        }

js

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;
                }
            }
        };

over