图片碰撞

效果图

html文件：

![](img/3.jpg)
![](img/6.jpg)
![](img/8.jpg)

css文件：

body{ background: #000;}
img{
  width:150px;
  height: 100px; 
  position: absolute;
  cursor: pointer;
  border: 3px #fff solid;
}
#box1{left: 50px;top:20px;}
#box2{left:300px;top:20px;}
#box3{left: 50px;top:200px;}
.abc{border: 3px red solid; opacity: 0.5;filter: alpha(opacity=50);}

js文件

        var oBox=document.getElementById("box1");
        var oBox2=document.getElementById("box2");
        var oBox3=document.getElementById("box3");
        var aImg=document.getElementsByTagName("img");
        drag(oBox);
        drag(oBox2);
        drag(oBox3);
        function drag(obj){
            //声明两个用于储存固定位置的变量。
            var disX;    //水平固定
            var disY;    //垂直固定
            var newObj=null;
            obj.onmousedown=function(ev){
                for(var i=0;i<aImg.length;i++){
                    aImg[i].style.transition="";
                    aImg[i].style.zIndex="1";
                }
                obj.style.zIndex="999";
                var e=ev||event;    //做一个事件对象的兼容
                disX=e.clientX-this.offsetLeft;    //获取水平方向固定距离。
                disY=e.clientY-this.offsetTop;   //获取垂直方向的固定距离。
                if(e.preventDefault){
                    e.preventDefault()
                }else{
                    e.returnValue=false;
                }
                //保存最初的obj的位置。
                var firstL=obj.offsetLeft;
                var firstT=obj.offsetTop;
                //在document上移动鼠标触发这个事件。
                document.onmousemove=function(ev){
                    var e=ev||event;
                    var valueX=e.clientX-disX;
                    var valueY=e.clientY-disY;
                    var maxL=document.documentElement.clientWidth-obj.offsetWidth;
                    var maxT=document.documentElement.clientHeight-obj.offsetHeight;
                    //三目运算符，能简化判断的代码。
                    valueX=valueX<0?0:valueX;
                    valueX=valueX>maxL?maxL:valueX;
                    valueY=valueY<0?0:valueY;
                    valueY=valueY>maxT?maxT:valueY;
                    //让一个实时变化的鼠标的坐标减去一个固定距离，就可以得到实时刷新的的坐标
                    obj.style.left=valueX+"px";
                    obj.style.top=valueY+"px";
                    //碰撞检测
                    newObj=null;
                    var arr=[];   //建立数组用于存储碰撞上的图片。
                    for(var i=0;i<aImg.length;i++){
                      if(aImg[i]!=obj){
                        if(hitTest(aImg[i],obj)){
                            arr.push(aImg[i])
                        }
                      }
                    }
                    //遍历数组                                                      
                    var min=Infinity;
                    for(var i=0;i<arr.length;i++){
                        var a=arr[i].offsetLeft-obj.offsetLeft;
                        var b=arr[i].offsetTop-obj.offsetTop;
                        var valueZ=a*a+b*b;   //平方和
                        if(min>valueZ){
                            min=valueZ;
                            newObj=arr[i];
                        }
                    }
                  }
              document.onmouseup=function(){
                  document.onmouseup=document.onmousemove=null;
                  if(newObj){
                    obj.style.transition="0.5s";
                    obj.style.left=newObj.offsetLeft+"px";
                    obj.style.top=newObj.offsetTop+"px";
                    newObj.style.transition="0.5s"
                    newObj.style.top=firstT+"px";
                    newObj.style.left=firstL+"px";
                  }else{
                    obj.style.transition="0.5s"
                    obj.style.left=firstL+"px";
                    obj.style.top=firstT+"px";
                    obj.style.zIndex="1";
                  }
                }
            }
        //碰撞检测的函数
         function hitTest(obj,obj2){
            //先把obj的一系列位置获取掉。
            var objL=obj.offsetLeft;
            var objT=obj.offsetTop;
            var objW=obj.offsetWidth;
            var objH=obj.offsetHeight;
            //再获取obj2的一系列位置。
            var obj2L=obj2.offsetLeft;
            var obj2T=obj2.offsetTop;
            var obj2W=obj2.offsetWidth;
            var obj2H=obj2.offsetHeight;
            if(objL+objW<obj2L||objT+objH<obj2T||obj2L+obj2W<objL||obj2T+obj2H<objT){
                   return false;
            }else{
                return true
            }
           }
        }