判断两个div块是否碰撞

Posted 2020-12-11 XyanZhang

这是一道面试题，当时面试官问的是如何判断页面中两个元素是否发生碰撞（当时太久没有练习DOM方面的操作的api了，没有想到，现在又研究了一下）

场景：一个container容器中，有两个正方形方块，颜色分别为yellow，blue

给container容器绑定了mousehover事件，鼠标和yellow的方块同步移动，当yellow接触到bule时，控制台输出true，表示碰撞到了

主要思路：通过获取元素的offsetLeft，offsetWidth，offsetTop，offsetHeight可以分别获取位置关系，通过以下分别获取yellow和blue的偏移

// L，R，T，B分别表示 div元素的left,right,top,bottom距离父级元素的偏移量
var L = div.offsetLeft;
var R = div.offsetLeft + obj1.offsetWidth;
var T = div.offsetTop;
var B = div.offsetTop + obj1.offsetHeight;

判断是否接触的逻辑：

yellowL表示yellow div元素的左偏移；blueL表示blue div元素的左偏移；

// yellowR < blueL：yellow右边 在 blue左边 的左方
// yellowL > blueR：yellow左边 在 blue右边 的右方
// yellowB > blueT：yellow底边 在 blue顶边 的上方
// yellowT < blueB：yellow顶边 在 blue底边 的下方
// 以上四种情况都表示不会接触
if( yellowR < blueL || yellowL > blueR || yellowB > blueT || yellowT < blueB ){
      return false 		           
}else {
      // 碰撞 
      return true
}