Javascript - 如何识别圆弧的碰撞

Question

I try to code a little game in javascript and there is the problem : I don't know how can I identify the empty arc in the eater circle to increment the score.

I add collisions between the eater circle and the ball and if the ball touch the "body" of the eater, it will show Game Over (that was done) and if the ball touch the "mouth" of the eater, it must increment the score.

Here is the code of the little game : http://jsbin.com/gujove/edit?html,css,js,output

Don't hesitate to tell me if you have any idea on how to do it.

Thanks.

Answer 1

Providing that you know the following:

• You know the coordinates of the center of the eater and the radius. (center of your reference plane)
• You can calculate the coordinates of the ends of the arc (centerY + sinA), (centerX+cosA) etc.
• You know the center of the ball and the radius.

Then:

• you have to calculate if the distance between the center of the ball and any of the arc ends is less or equal then the radius of the ball.(if distance is less, it means that the arc corner is inside the ball, hence you have hit)

• On top of that, angle for the line drawn from center of the eater to center of the ball, should be in beteween the angles of the lines drawn to the sides of the arc, if you consider the center of your eater as a reference point for the plane. (if the angle is in between and first condition holds, then you are passing the empty space.