一对一碰撞检测

target是目标物体，move是移动物体

 情况1：target在move左上角

 情况2：target在move右上角

情况3：target在move左下角

 情况4：target在move右下角

重叠阴影面积算法

let width = (Math.min(tx2,mx2) - Math.max(tx1,mx1));   

let height = (Math.min(ty2,my2) - Math.max(ty1,my1));

let stackArea = (width > 0 ? width : 0) * (height > 0 ? height : 0);

stackAre=0代表没有重叠；stackArea >0代表有交集

我们来点实际的代码

//判断两个矩形DIV是否重叠----------------------------------------
function isOver(targetDom, moveDom) {if (targetDom === moveDom) return false;let tx1 = parseInt(targetDom.style.left);let ty1 = parseInt(targetDom.style.top);let tx2 = tx1 + parseInt(targetDom.style.width);let ty2 = ty1 + parseInt(targetDom.style.height);let mx1 = parseInt(moveDom.style.left);let my1 = parseInt(moveDom.style.top);let mx2 = mx1 + parseInt(moveDom.style.width);let my2 = my1 + parseInt(moveDom.style.height);let width = Math.min(tx2, mx2) - Math.max(tx1, mx1);let height = Math.min(ty2, my2) - Math.max(ty1, my1);let stackArea = (width > 0 ? width : 0) * (height > 0 ? height : 0);// ----------------------------------------    if (stackArea > 0) return true;return false;
}

一对多碰撞检测

target是目标物体，move是移动物体

这里就需要去遍历所有的target，计算每个重叠面积大小，挑出面积最大的那一个。

为了方便计算比较，我们通常是在上面的代码基础上加一个面积大小判断，重叠面积超过target面积一半的情况就认为是碰撞对象

​//判断多个矩形DIV是否重叠，并获取最大的那个----------------------------------------
function isOverManyTarget(targetDom, moveDom) {if (targetDom === moveDom) return false;let tx1 = parseInt(targetDom.style.left);let ty1 = parseInt(targetDom.style.top);let tx2 = tx1 + parseInt(targetDom.style.width);let ty2 = ty1 + parseInt(targetDom.style.height);let mx1 = parseInt(moveDom.style.left);let my1 = parseInt(moveDom.style.top);let mx2 = mx1 + parseInt(moveDom.style.width);let my2 = my1 + parseInt(moveDom.style.height);let width = Math.min(tx2, mx2) - Math.max(tx1, mx1);let height = Math.min(ty2, my2) - Math.max(ty1, my1);let stackArea = (width > 0 ? width : 0) * (height > 0 ? height : 0);// ----------------------------------------//计算面积let measure = parseInt(targetDom.style.width) * parseInt(targetDom.style.height);let measureHalf = measure / 2;if (stackArea > measureHalf && stackArea <= measure) return targetDom;return null;
}