JS剖析正方形物体碰撞原理

最近在做一个拖拽图片排序的项目，其中就有个检测两个对象之间是否发生碰撞，网上有好多写好的代码，但讲原理的没有找到几个，下面就剖析一下是如何实现碰撞的！

一、4个结论

①拖拽层在目标层上部活动时不会碰撞

②拖拽层在目标层左边活动时不会碰撞

③拖拽层在目标层右边活动时不会碰撞

④拖拽层在目标层下边活动时不会碰撞

二、先来理解层的4个边界



三、结论①拖拽层在目标层上部活动时不会碰撞



假设div1是拖拽层，div2是目标层。

注：div1的下边界始终在div2上边界上面活动，则不会发生碰撞。

四、结论②拖拽层在目标层左边活动时不会碰撞



注：div1的右边界始终在div2左边界左面活动，则不会发生碰撞。

五、结论③拖拽层在目标层右边活动时不会碰撞



注：div1的左边界始终在div2右边界右面活动，则不会发生碰撞。

六、结论④拖拽层在目标层下边活动时不会碰撞



注：div1的上边界始终在div2下边界下面活动，则不会发生碰撞。

七、只需要判断四个边界，上面4种是不会发生碰撞的情况，排除这四种就说明发生碰撞了。

八、原理讲完了，直接上代码。

function(obj1, obj2) {
var t1 = obj1.offsetTop;
var r1 = obj1.offsetWidth+obj1.offsetLeft;
var b1 = obj1.offsetHeight+obj1.offsetTop;
var l1 = obj1.offsetLeft;

var t2 = obj2.offsetTop;
var r2 = obj2.offsetWidth+obj2.offsetLeft;
var b2 = obj2.offsetHeight+obj2.offsetTop;
var l2 = obj2.offsetLeft;

if(t1>b2||r1<l2||b1<t2||l1>r2){
return false;
}else{
return true;
}
}

碰撞原理叙述完了，如有不足之处欢迎大家指正！