圈和多边形之间的Javascript碰撞检测？(Javascript Collision Detection between circle and polygon?)

圈和多边形之间的Javascript碰撞检测？(Javascript Collision Detection between circle and polygon?)

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

______ / _____| / / / / ---

我在填充/描边调用之前使用lineTo（）几次绘制多边形，因此我知道所有点的x，y co-ords。

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

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将是'顶部水平线'平台的Y值.Bottom将是'platformHeight'下面的'水平线'的Y值，rightPipe *用于显示的示例。 leftPipe *用于相同的多边形，除了在另一个方向上（形成一个管道，你必须在没有碰撞的情况下射击球）。

我的particleCollision（）函数只接受tmpParticle，并根据Y值（第二个参数，即pipeBottom）反转方向。 这虽然现在可以正常工作，但我可能需要稍后改进它。

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

I'm unsure how to go about defining the area for a collision detection function when I have a polygon that looks like:

______ / _____| / / / / ---

I draw the polygon using lineTo() a few times before fill/stroke call so I know the x,y co-ords of all the points.

Currently I just check if the ball is beyond certain areas of points:

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 would be the Y value for the 'top horizontal line' platformBottom would be the Y value for the 'horizontal line just below platformHeight' rightPipe* is for the example shown. leftPipe* is for the same polygon except in the other direction (to form a pipe, where you must shoot the balls through without colliding).

My particleCollision() function just takes the tmpParticle and inverses the direction based on the Y value (2nd parameter, i.e. pipeBottom). This works fine for now though I may need to improve it later on.

I just need to figure out a better way to define the area for collisions.

最满意答案

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

You may consider splitting your pipe into triangles and then finding triangle - circle intersection area. If they do intersect the intersection will always be a convex polygon (area is easy to calculate by splitting into triangles again) and a segment (area is easy to calculate too - http://en.wikipedia.org/wiki/Circular_segment). The other case is the triangle itself, in case it lies inside the circle completely (a simple case again).