?

一對一碰撞檢測

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;
}

?

總結

以上是生活随笔為你收集整理的原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查，通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。