HTML5 Canvas:鼠标和多边形碰撞检测

Question

所以我正在用HTML5和Javascript制作塔防游戏.我唯一的问题是检测鼠标何时与攻击者的路径接触,这是阻止玩家在路径上建造塔的必要条件.攻击者的路径在MAP.js文件中确定(参见底部的链接),由二维数组(包含x和y对的数组)确定,因此我必须使用的是一系列点,连接时组成路径.我只是想禁止玩家将塔放在路径的50个像素内.说实话,我对碰撞检测很可怕,所以一些帮助将非常感激.

以下是所有代码的链接:http: //shapeshifting.comuv.com/Tower_Defense/td/

如您所想,只有.js文件适用,但大多数相关代码都在objects.js文件中.(请原谅杂乱)

Answer 1

我会逐步解决这个问题。让我们看看你从什么开始。您有一条由点定义的路径——点对定义一条线段。所以你真正拥有的是一条由线段组成的路径。当用户移动鼠标时，您将获得当前位置的 x,y 坐标。您要做的就是找到鼠标点到所有线段的距离。如果距离任何线段都小于 50 像素，那么您就不允许它们在那里构建。

要找到点和线段之间的距离，伪代码如下所示。假设A点和B点代表线段的两端，C点为鼠标点。

float distancePoint2LineSegment(Point a, Point b, Point c) {
  Vector ab = b - a
  Vector ac = c - a
  Vector bc = c - b

  float e = dotProduct(ac, ab)
  if (e <= 0.0)
    return sqrt(dotProduct(ac, ac))

  float f = dotProduct(ab, ab)
  if (e >= f)
    return sqrt(dotProduct(bc, bc))

  return sqrt(dotProduct(ac, ac) - e * e / f)
}

这可以回答您的碰撞检测问题，但我认为您会想看看性能。您的路径中将有多少条线段？您是否想在用户每次移动鼠标时计算到每个线段的距离？您可以将线段放入四叉树中，这样您只需针对较少数量的线段测试鼠标点碰撞。