js实现方块的碰撞检测

文章地址：https://www.cnblogs.com/sandraryan/
个人感觉。方块的碰撞检测比圆形麻烦~~
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        body {

            margin: 0;

            padding: 0;

            background-color: lightyellow;

        }

        .wrap {

            width: 50px;

            height: 50px;

            background-color: red;

            position: fixed;

            top: 0;

            left: 0;

        }

        .box {

            position: fixed;

            width: 50px;

            height: 50px;

        }

    </style>

</head>

<body>

    <div class="wrap"></div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    <script>

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

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

        // 封装随机数函数

        function rn(a, b) {

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

        }

        // 循环遍历要被检测的盒子（被检测的盒子也可以用js生成）给他们设置位置和颜色

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

            // 随机生成box的位置

            box[i].style.left = rn(0, 1200) + 'px';

            box[i].style.top = rn(0, 500) + 'px';

            // 设置随机颜色

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

            // 要用box[i].color接受颜色，本来用变量接受，但是在后面每碰撞成功的元素恢复原有颜色时，所以box都会变成相同的颜色

            box[i].color = 'rgba(' + rn(0, 254) + ',' + rn(0, 254) + ',' + rn(0, 254) + ',' + opc + ')';

            box[i].style.backgroundColor = box[i].color;

        }

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

        document.onmousemove = function (ev) {

            let e = ev || window.event;

            // 获取移动盒子的宽高（相等

            // 用变量long接受wrap的宽高，（正方形）

            let long = wrap.offsetWidth;

            // x y 当前窗口宽高-盒子宽高/2

            let x = e.clientX - long / 2;

            let y = e.clientY - long / 2;

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

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

            // 判断上下左右四个方向是否碰撞

            for (let j = 0; j < box.length; j++) {

                // 顶部：wrap高度 + wrap top值 >= 检测盒子top

                let t = long + wrap.offsetTop >= box[j].offsetTop;

                let b = wrap.offsetTop <= box[j].offsetHeight + box[j].offsetTop;

                let l = long + wrap.offsetLeft >= box[j].offsetLeft;

                let r = wrap.offsetLeft <= box[j].offsetLeft + box[j].offsetWidth;

                // 如果在四个方向任意方向碰撞成功，变色

                if (l && t && r && b) {

                    box[j].style.backgroundColor = 'red';

                } else {

                    box[j].style.backgroundColor = box[j].color;

                }

            }

        }

    </script>

</body>

</html>
巴特西

js实现方块的碰撞检测

最新文章

热门文章
