JavaScript课程——Day13（2、碰撞检测） 

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            z-index: 1;
        }

        #box2 {
            width: 300px;
            height: 200px;
            background: green;
            position: absolute;
            left: 500px;
            top: 300px;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <div id="box2"></div>

    <script>
        var box = document.getElementById('box');
        var box2 = document.getElementById('box2');

        // 一打开就求box2的四边距离
        var L2 = box2.offsetLeft;
        var T2 = box2.offsetTop;
        var R2 = box2.clientWidth + L2;
        var B2 = box2.clientHeight + T2;
        console.log(L2, T2, R2, B2);

        box.onmousedown = function (ev) {
            // 设置全局捕获，兼容IE8及以下
            if (box.setCapture) {
                box.setCapture();
            }
            var ev = ev || event;

            // 可视区宽高
            var clientW = document.documentElement.clientWidth;
            var clientH = document.documentElement.clientHeight;

            // 盒子宽高
            var boxW = box.clientWidth;
            var boxH = box.clientHeight;

            // 鼠标到盒子的距离
            var disX = ev.clientX - box.offsetLeft;
            var disY = ev.clientY - box.offsetTop;

            // 拖动
            document.onmousemove = function (ev) {
                var ev = ev || event;
                var L = ev.clientX - disX; // 盒子到左边的距离
                var T = ev.clientY - disY; // 盒子到顶部的距离

                if (L < 0) {
                    L = 0;
                } else if (L > clientW - boxW) {
                    L = clientW - boxW;
                }

                if (T < 0) {
                    t = 0;
                } else if (T > clientH - boxH) {
                    T = clientH - boxH;
                }

                box.style.left = L + 'px';
                box.style.top = T + 'px';

                // 求拖动盒子的四边距离
                var L1 = L;
                var T1 = T;
                var R1 = L1 + boxW;
                var B1 = T1 + boxH;

                // 判断box与box2是否碰撞
                if (R1 < L2 || B1 < T2 || L1 > R2 || T1 > B2) { // 未碰撞，box2维持原色
                    box2.style.background = 'green';
                } else { // 发生碰撞，box2变为黄色
                    box2.style.background = 'yellow';
                }
            }

            // 抬起
            document.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;

                // 释放全局捕获，兼容IE8及以下
                if (box.releaseCapture) {
                    box.releaseCapture();
                }
            }

            return false; // 阻止浏览器默认行为
        }
    </script>
</body>

</html>

 

posted @ 2021-05-07 21:37  别动我咖喱  阅读(69)  评论(0)    收藏  举报