二维AABB box碰撞检测和优化

原文链接: 二维AABB box碰撞检测和优化

上一篇: 动态实时创建iframe, 实现类似sandbox的在线编程效果

下一篇: 如果我会说你好, 那么我还需要学习hello吗? ----碎碎念

同步和碰撞永远的神

确实好麻烦啊, ui写了半小时, 算法验证五分钟... 还好vue出活快... 看来需要快点熟悉cocos了

3d

https://www.cnblogs.com/lyggqm/p/5386174.html

https://blog.csdn.net/Windgs_YF/article/details/87884884

2d

https://zhuanlan.zhihu.com/p/163590893

效果

随机生成不同位置和大小的box,  任意拖动一个box, 在拖动的过程中检测是否和其他box相交

主要思想, 将二维AABB检测转换为两个矩形的各两条边的交叉问题

由于一般情况下, 世界坐标系和元素坐标系都是直接按照像素来的, 所以我们可以通过简单的对比就能得到结果

网页中一般左上角为原点, x向右, y向下

核心代码

// 检查两条线段是否有交点
// 保证顺序 x1<=y1 x2<=y2
const checkLine = (aMin, aMax, bMin, bMax) => {
  if (aMax < bMin) return false
  if (aMin > bMax) return false
  return true
}

// 检查两个box是否相交
const checkBox = (box1, box2) => {
  return (
    checkLine(box1.x, box1.x + box1.width, box2.x, box2.x + box2.width) &&
    checkLine(box1.y, box1.y + box1.height, box2.y, box2.y + box2.height)
  )
}
/*
检查是否碰撞, 返回碰撞矩形的id
list中已经去除了 移动的box
*/
export const check = (item, list) => {
  const ans = []
  for (const box of list) {
    if (checkBox(item, box)) ans.push(box.id)
  }
  return ans
}