js九宫格的碰撞检测

时间：2024-01-10 10:53:50

说来惭愧，我一直以为四四方方的拖拽碰撞检测是一个比较容易的事情，后来试过一次，真是让我耗费了无数的脑细胞，原理其实不难，但是具体做起来可就让我很恶心，这可能跟我驾驭的代码数量有关系，我一般也就写半屏幕的js代码，再多了，我感觉我就受不了，而这个拖拽碰撞真是然我写了好多行，写了将近130行，这才感觉到写代码真塔木德是一件恶心人的事情。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>碰撞检测</title>

<style>

* {

    margin:0;

    padding:0;

}

.c{ background:#9FF; overflow:hidden; padding-bottom:30px; width:550px; margin: 50px auto; position:relative; height:500px;}

.a {

    height:100px;

    width:100px;

    background:#FF9;

    float:left;

    margin:30px 0 0 30px;

}

</style>

</head>

<body>

<div class="c" id="wrap">

  <div class="a">1</div>

  <div class="a">2</div>

  <div class="a">3</div>

  <div class="a">4</div>

  <div class="a">5</div>

  <div class="a">6</div>

  <div class="a">7</div>

  <div class="a">8</div>

  <div class="a">9</div>

  <div class="a">10</div>

  <div class="a">11</div>

  <div class="a">13</div>

</div>

</body>

</html>

<script type="text/javascript">

var o=document.getElementById("wrap");

var arr=o.getElementsByTagName("div");

for(var i=arr.length;i--;i>=0){

    arr[i].style.left=arr[i].offsetLeft+"px";

    arr[i].style.top=arr[i].offsetTop+"px";

    arr[i].style.position="absolute";

    arr[i].style.margin=0;

    m(arr[i])

}

//拖动和各种判断

function m(obj){

    var minD=1000;

    var num=null;

    obj.onmousedown=function(e){

        var aa=[obj.offsetLeft,obj.offsetTop];

        var e=e||event;

        var disX=e.clientX-obj.offsetLeft;

        var disY=e.clientY-obj.offsetTop;

        document.onmousemove=function(e){

            var e=e||event;

            obj.style.left=e.clientX-disX+"px";

            obj.style.top=e.clientY-disY+"px";

            var s=siblings(obj);

            for(var i=0;i<s.length;i++){

                if(c(obj,s[i])){

                    if(minD<distance(obj,s[i])){

                        minD=distance(obj,s[i]);

                        num=i;

                    }

                }

            }

        }

        document.onmouseup=function(){

            exchangePosition(obj,siblings(obj)[num],aa);

            document.onmousemove=null;

            document.onmouseup=null;

            }

            return false;

    }

}

function exchangePosition(a,b,x){

    if(b){

        a.style.left=b.offsetLeft+"px";

        a.style.top=b.offsetTop+"px";

        b.style.left=x[0]+"px";

        b.style.top=x[1]+"px";

    }else{

        a.style.left=x[0]+"px";

        a.style.top=x[1]+"px";

    }

}

//求两个Div之间的距离

function distance(x,y,z){

        var l=x.offsetLeft+x.offsetWidth/2;

        var t=x.offsetTop+x.offsetHeight/2;

        var ll=y.offsetLeft+y.offsetWidth/2;

        var tt=y.offsetTop+y.offsetHeight/2;

        var dis=(l-ll)*(l-ll)+(t-tt)*(t-tt);

        return dis

}

//碰撞检测方法

function c(x,y){

    var l=x.offsetLeft;

    var r=l+x.offsetWidth;

    var t=x.offsetTop;

    var b=t+x.offsetHeight;

    var ll=y.offsetLeft;

    var rr=ll+y.offsetWidth;

    var tt=y.offsetTop;

    var bb=tt+y.offsetHeight;

    if(r<ll || b<tt || l>rr || t>bb){

        return false;

    }else{

        return true;

    }

}

function siblings(obj){

    return preall(obj).concat(nextall(obj))

}

function preall(obj){

    var arr=[];

    var o=obj.previousSibling;

    while(o){

        if(o.nodeType==1){

            arr.unshift(o);

        }

        o=o.previousSibling;

    }

    return arr;

}

function nextall(obj){

    var arr=[];

    var o=obj.nextSibling;

    while(o){

        if(o.nodeType==1){

            arr.push(o);

        }

        o=o.nextSibling;

    }

    return arr;

}

</script>

相关文章