碰撞检测 ：Line

引子

在 Collision Detection ：Rectangle 中主要介绍了矩形相关的碰撞检测，接着来看看直线的情况。

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

• Origin
• My GitHub

Line/Point

这是示例页面。

线与点的碰撞检测，观察下面一张图：

从图中可以发现，当点在线上时，到两个端点的距离之和与线的长度相同。两点之间的距离，同样使用之前用到过的勾股定理。考虑到计算的精度误差，可以设置一个误差允许范围值，这样会感觉更加自然一些。

/*
 * (x1,y1) 线的一个端点
 * (x2,y2) 线的另一个端点
 * (px,py) 检测点的坐标
 */
function checkLinePoint({
   x1,y1,x2,y2,px,py}) {
   
  const d1 = getLen([px,py],[x2,y2]);
  const d2 = getLen([px,py],[x2,y2]);
  const lineLen = getLen([x1,y1],[x2,y2]);
  const buffer = 0.1; // 误差允许范围
  if (d1+d2 >= lineLen-buffer && d1+d2 <= lineLen+buffer) {
   
    return true; // 发生碰撞
  } else {
   
    return false; // 没有碰撞
  }
}

/*
 * 勾股定理计算两点间直线距离
 * point1 线的一个端点
 * point2 线的另一个端点
 */
function getLen(point1,point2) {
   
  const [x1,y2] = point1;
  const [x2,y2] = point1;
  const minusX = x2-x1;
  const minusY = y2-y1;
  const len = Math.sqrt(minusX*minusX + minusY*minusY