007碰撞检测

<!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>
猜你喜欢
