欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

007碰撞检测

程序员文章站 2024-03-15 21:56:00
...
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>碰撞检测</title>
    <style>
        #main{
            width: 200px;
            height: 200px;
            background: aquamarine;
            position: absolute;
        }
        #box{
            width: 200px;
            height: 200px;
            background:rgba(240,30,0,0.5);
            position: absolute;
            top: 300px;
            left: 500px;
        }
    </style>
    <script>
        document.onmousemove=function (e) {
            var main=document.getElementById("main");
            var box=document.getElementById("box");

            main.style.top=e.clientY+"px";
            main.style.left=e.clientX+"px";
            hitTest(main,box);


        }
        function hitTest(main,box) {
            if(main==null||box==null){
                return;
            }
            var m_top=main.offsetTop;
            var m_bottom=main.offsetTop+main.offsetHeight;
            var m_left=main.offsetLeft;
            var m_right=main.offsetLeft+main.offsetWidth;

            var b_top=box.offsetTop;
            var b_bottom=box.offsetTop+box.offsetHeight;
            var b_left=box.offsetLeft;
            var b_right=box.offsetLeft+box.offsetWidth;

            if(b_top<m_bottom&&m_right>b_left&&m_top<b_bottom&&m_left<b_right){
            }
            else{
                box.style.background="rgba(240,30,0,0.5)";
            }
        }
    </script>
</head>
<body>
<div id="main"></div>
<div id="box"></div>
</body>
</html>