圆形和多边形之间的Javascript碰撞检测？

Question

当我有一个看起来像这样的多边形时，我不确定如何去定义碰撞检测功能的区域：

    ______
   / _____|
  / /
 / /
---

在填充/描边调用之前，我使用lineTo（）绘制了多边形，所以我知道所有点的x，y坐标。

目前，我只检查球是否超出某些点区域：

    if(tmpParticle.y <= platformBottom) {
        if(tmpParticle.x < leftPipe_middleX || tmpParticle.x > rightPipe_middleX) {
            tmpParticle = particleCollision(tmpParticle, platformBottom);
        }
    }

    if(tmpParticle.y <= pipeBottom && tmpParticle.y >= pipeBottom - 30) {
        if(tmpParticle.x < leftPipe_bottomRightX && tmpParticle.x > leftPipe_bottomLeftX) {
            tmpParticle = particleCollision(tmpParticle, pipeBottom);
        } else if (tmpParticle.x < rightPipe_bottomRightX && tmpParticle.x > rightPipe_bottomLeftX) {
            tmpParticle = particleCollision(tmpParticle, pipeBottom);
        }
    }

platformHeight将是“顶部水平线” platform的Y值，bottomHeight是“位于platformHeight下方水平线”的Y值，例如rightPipe *。 leftPipe *用于同一多边形，但在另一个方向上除外（要形成管道，您必须在其中射出球而不会发生碰撞）。

我的particleCollision（）函数仅使用tmpParticle并根据Y值（第二个参数，即pipeBottom）反转方向。 尽管目前我可能需要稍后对其进行改进，但目前效果良好。

我只需要找出一种更好的方法来定义碰撞区域。

Answer 1

您可以考虑将管道分成三角形，然后找到triangle - circle相交区域。 如果它们相交，则相交将始终是convex polygon （易于通过再次拆分为三角形来计算面积）和segment （也易于计算面积-http: //en.wikipedia.org/wiki/Circular_segment ）。 另一种情况是三角形本身，以防它完全位于圆内（再次是简单的情况）。