检查一个点是否通过一条线

Question

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

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

不要使用圆点，使用矢量。一组矢量。 找出一个点是否与一条线接触（向量） 只需安装一个带有两个点的三角形和点矢量分析，如果三角形的面积接近零（设置一个限制），则接触。

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

Answer 2

将数学表达式用于向量，然后您可以检查向量是否交叉