视频教程

文字教程

视频里有两种, 我觉得视频中第二种判断的局限性有点大就不记录了

实现的原理是通过四边来做判断, 一共有四种情况(左上右下)

提示

橙色的是 domA 绿色的是 domB

左测的情况

这里如果没有碰上

那也就是说 domA 的 右上角 要小于 domB 的 左上角

也就是说: domA.offsetLeft + domA.offsetWidth < domB.offsetLeft

上测的情况

和左侧一样

也就是说 domA 的 左下角 要小于 domB 的 左上角

也就是说: domA.offsetTop + domA.offsetHeight < domB.offsetTop

右测的情况

和左侧一样

也就是说 domA 的 左上角 要大于 domB 的 右上角

也就是说: domA.offsetLeft > domB.offsetLeft + domB.offsetWidth

下测的情况

和左侧一样

也就是说 domA 的 左上角 要大于 domB 的 左下角

也就是说: domA.offsetTop > domB.offsetTop + domB.offsetHeight

总结

所有情况合起来就可以封装成一个方法:

const checkCollision = (domA, domB) =>
  !(
    // 左侧
    (
      domA.offsetLeft + domA.offsetWidth < domB.offsetLeft ||
      // 上侧
      domA.offsetTop + domA.offsetHeight < domB.offsetTop ||
      // 右侧
      domA.offsetLeft > domB.offsetLeft + domB.offsetWidth ||
      // 下侧
      domA.offsetTop > domB.offsetTop + domB.offsetHeight
    )
  )