如何实现 Javascript 折线碰撞检测

Question

我目前有一个 JavaScript 平台游戏。我使用许多其他网站上描述的 SAT 方法创建了一个带有响应的多边形-多边形碰撞检测。

我还在 Polygon 构造函数中创建了一个函数，该函数将返回暴露于多边形顶部的边或暴露于多边形底部的边，具体取决于选择的方向。返回的数组包含很多不同的Vector，后面会更详细的解释。

目前的代码看起来有点像这样：

Polygon.prototype.getSidesOn = function(dir) {
  if (dir === "top" || dir === "bottom") {
    var result = [], start = false, stop = false, elen = 
this.calcPoints.length, e = 0, f = 0, point, next, prevX, prevY, directionX,   directionY;
    while (!stop) {
      if (e >= 5*elen) {return;}
      f = e%elen;
      prev = f-1 < 0 ? this.calcPoints[elen-1] : this.calcPoints[f-1];
      point = this.calcPoints[f];
      prevX = directionX;
      prevY = directionY;
      directionX = point.x > prev.x ? "right" : point.x < prev.x ? "left" : directionX;
      directionY = point.y < prev.y ? "up" : point.y > prev.y ? "down" : directionY;
      if (prevX !== directionX && prevX && prevY) {
        if (!start) {
          start = dir === "top" ? directionY === "up" : directionY === "down";
        } else {
          break;
        }
      }
      if (start) {
        if (point.x !== prev.x) {
          if (!result.length) {
            result.push(new Vector(prev.x,prev.y),new 
Vector(point.x,point.y));
          } else {
            result.push(new Vector(point.x,point.y));
          }
        } else {
          break;
        }
      }
      e++;
    }
    return result;
  } else {
    return;
  }
}

我知道它有点乱，但这不用担心，因为我稍后会优化它。

基本上，它只适用于凸多边形（我的意思是“凸”这个词，如三角形或不会回到自身的形状）。无论如何，它之所以有效，是因为所有凸多边形只有两个点，相邻边面向相反的 X 方向。

反正输出的数组看起来有点像这样：

//[Vector,Vector,Vector,Vector...]

这不是它实际的样子，但基本上，它为检测到的每个点输出一个向量数组。

我需要实现的是一种检测其中两条折线之间碰撞的方法。与多边形-多边形碰撞检测系统不同，它不需要响应向量，代码应该输出“真”或“假”布尔值。

我目前能想到的唯一方法如下：

function PolylinePolyline(line1,line2) {
  var i, ilen = line1.length, j, jlen = line2.length;
  for (i = 0; i < ilen; i++) {
    for (j = 0; j < jlen; j++) {
      var point1 = line1[i];
      var point2 = i+1 < ilen ? line1[i+1] : line1[0];
      var point3 = line2[j];
      var point4 = j+1 < jlen ? line2[j+1] : line2[0];
      var line01 = new line(point1,point2);
      var line02 = new line(point3,point4);
      if (LineLine(line01,line02) {
        return true;
      }
    }
  }
  return false;
}

虽然这可行，但如果线条是 5 点长，那么使用起来非常昂贵，而且我必须检测其中 4 条线之间的碰撞。我更喜欢另一种方法，如果它们发生碰撞则返回 true，否则返回 false。我不会解释为什么我需要这个，因为它有点抽象，但折线的一个例子是这样的：

Note that the polylines are convex-shaped

Answer 1

您可以通过定义（伪随机）在两个多边形之间的无限长线来加速碰撞搜索，这样该线将多边形分成 3 组：上方、下方和碰撞。因为它们被线分开，所以您知道上面的所有内容都不会与下面的所有内容发生冲突。重复几次，直到您有少量未确定的多边形对，然后将旧算法应用于剩余的对。

您可以通过计算连接多边形集中两个多边形中心的线中间的法线来找到（伪随机）无限长的线。