javascript - 检查一个点是否穿过一条线

Question

我正在 HTML5 Canvas 中编写游戏。如果一条线接触到自己或对手线的任何一点，该线就会停止移动。我写的函数如下。

function hasPoints(x, y) {
  for (var i = 0; i < points.length; i++) {

    if (Math.abs(points[i][0] - x) < 2 && Math.abs(points[i][1] - y) < 2) {
        return true;
        break;
    }
  }
  return false;
}

//check if this point crosses other players' points
if (hasPoints(p1.x,p1.y) || canPlay==false) {
    clearLoop();
}else{
    context.fillStyle = "green";
    context.fillRect(p1.x,p1.y, 5,5);
    addPoints(p1.x,p1.y);       
    sendMyPoints();     
    loopTimer = setTimeout('drawLine()', 50);
}

大多数情况下它都有效。但在某些特殊情况下(如下图所示)它根本无法返回 false。

有人可以帮我改进这个功能，使其完美运行吗？

Answer 1

不要使用点，使用矢量。向量数组。找出一个点是否与一条线(向量)相接触只需安装一个有两个点的三 Angular 形并进行点向量分析，如果三 Angular 形的面积接近于零(设置限制)，则此接触。

y1 x1 1
y2 x2 1 = (y1*x2*1)+(x1*1*y3)+(1*y2*x3)-(x1*y2*1)-(y1*1*x3)-(1* x2*y3)
y3 x3 1
结果应接近于零 (0.012121 ...)
这是一种发现线是否与目标方向对齐的方法
http://en.wikipedia.org/wiki/Determinant