关于javascript:碰撞检测Point

引子

在 Collision Detection 中对碰撞检测作了简略的介绍。在查问材料时，在 Github 上发现了 CollisionDetection 这个我的项目。查看之后，发现对于碰撞检测的探讨，由浅入深，很适宜学习。在其根底上，做了 JavaScript 版本的实现。

以下示例未做兼容性查看，倡议在最新的 Chrome 浏览器中查看。

• Origin
• My GitHub

Point/Point

这是示例页面。

最早的碰撞检测是检测两个点的碰撞。为了检测它们是否接触，咱们只须要查看它们的 X 和 Y 坐标是否一样。

/*
 * (x1,x2) 点的坐标
 * (y1,y2) 点的坐标
 */
function checkPointPoint(x1,x2,y1,y2) {if (x1 == x2 && y1 == y2) {return true; // 产生碰撞} else {return false; // 没有碰撞}
}

Point/Circle

这是示例页面。

点与圆 的碰撞检测，只须要比拟点和圆心之间的间隔 distance 是否 小于或等于 圆的半径 r。

function checkPointCircle() {if (distance <= r) {return true; // 产生碰撞} else {return false; // 没有碰撞}
}

如下图所示，计算两个点之间的间隔，在几何上进行转换，应用勾股定理（Pythagorean Theorem）能够得出：

a*a + b*b = c*c; // 勾股定理
a = px - cx; // 点 x 坐标与 圆心 x 坐标
b = py - cy; // 点 y 坐标与 圆心 y 坐标
c = Math.sqrt(a*a + b*b);

带入到下面检测碰撞的逻辑中：

/*
 * (px,py) 点的坐标
 * (cx,cy) 圆心的坐标
 * radius 圆的半径
 */
function checkPointCircle({px,py,cx,cy,radius}) {
  const minusX = px - cx;
  const minusY = py - cy;
  const distance = Math.sqrt(minusX*minusX + minusY*minusY);
  if (distance <= radius) {return true; // 产生碰撞} else {return false; // 没有碰撞}
}

Circle/Circle

这是示例页面。

圆与圆 的碰撞检测，只须要比拟两个圆心之间的间隔 distance 是否 小于或等于 两个圆的半径之和 r1+r2。

同样的应用到了勾股定理。

/*
 * (c1x,c1y) 圆心的坐标
 * (c2x,c2y) 圆心的坐标
 * r1,r2 圆的半径
 */
function checkCircleCircle({c1x,c1y,c2x,c2y,r1,r2}) {
  const minusX = c1x - c2x;
  const minusY = c1y - c2y;
  const distance = Math.sqrt(minusX*minusX + minusY*minusY);
  if (distance <= r1+r2) {return true; // 产生碰撞} else {return false; // 没有碰撞}
}

参考资料

• POINT/POINT
• POINT/CIRCLE
• CIRCLE/CIRCLE