碰撞检测

最新推荐文章于 2024-04-27 20:09:33 发布

苦瓜式的幽默

最新推荐文章于 2024-04-27 20:09:33 发布

阅读量2k

点赞数 2

分类专栏：前端文章标签： javascript css js html jquery

本文链接：https://blog.csdn.net/are_gh/article/details/113244417

版权

前端专栏收录该内容

45 篇文章 2 订阅

订阅专栏

js 碰撞检测

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        margin: auto;
        width: 300px;
        height: 300px;
        background-color: green;
    }
    
    span {
        position: absolute;
        top: 0px;
        left: 0px;
        display: block;
        width: 100px;
        height: 100px;
        background-color: rgb(10, 151, 233);
    }
</style>

<body>
    <div></div>
    <span></span>
    <script>
        var div = document.getElementsByTagName('div')[0];
        var span = document.getElementsByTagName('span')[0];
        span.onmousedown = function(e) {
            // 事件对象兼容
            e = window.event || e;
            // 添加全局捕获
            if (span.setCapture) {
                span.setCapture();
            }
            // 鼠标按下获取鼠标距离页面左侧和顶部距离
            var x = e.clientX;
            var y = e.clientY;
            // 元素距离页面左侧和顶部距离
            var elex = span.offsetLeft;
            var eley = span.offsetTop;
            // 鼠标距离元素距离 =鼠标距离页面距离 -元素距离页面距离
            var X = x - elex;
            var Y = y - eley;
            document.onmousemove = function(e) {
                // 鼠标移动 获取鼠标距离页面距离
                // 事件对象兼容
                e = window.event || e;
                var movex = e.clientX;
                var movey = e.clientY;
                // 元素的left和top值 =鼠标距离页面距离 -鼠标距离元素距离
                var leftx = movex - X;
                var lefty = movey - Y;
                /*----------------------------------------------------------*/
                // 碰撞检测
                // 1.左侧安全距离 =大盒子距离页面左侧距离 -小盒子占位宽
                var safeleft = div.offsetLeft - span.offsetWidth;
                // 2.右侧安全距离 大盒子距离页面左侧距离 +大盒子占位宽
                var saferight = div.offsetLeft + div.offsetWidth;
                // 3.上侧安全距离 =大盒子距离页面顶部距离 -小盒子占位高
                var safetop = div.offsetTop - span.offsetHeight;
                // 4. 下侧安全距离 = 大盒子距离页面顶部距离 + 大盒子占位高
                var safebottom = div.offsetTop + div.offsetHeight;

                if (leftx < safeleft || leftx > saferight || lefty < safetop || lefty > safebottom) {
                    div.style.background = 'green';
                } else {
                    div.style.background = 'red';
                }

                /*----------------------------------------------------------*/

                // 边界值
                // 左
                if (leftx <= 0) {
                    leftx = 0;
                }
                // 上
                if (lefty <= 0) {
                    lefty = 0;
                }
                // 右
                var rightx = document.documentElement.clientWidth - span.offsetWidth;
                if (leftx >= rightx)
                    leftx = rightx;
                // 下
                var righty = document.documentElement.clientHeight - span.offsetHeight;
                if (lefty >= righty) {
                    lefty = righty;
                }


                span.style.left = leftx + 'px';
                span.style.top = lefty + 'px';
            }
            document.onmouseup = function() {

                    document.onmousemove = null;
                    if (span.releaseCapture) {
                        span.releaseCapture();
                    }


                }
                // 阻止默认事件
            return false;
        }
    </script>
</body>

</html>

苦瓜式的幽默

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
7
评论
碰撞检测

js 碰撞检测<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style&gt...
复制链接

扫一扫