Javascript HTML5 Canvas Collision Detection

Question

I'm working on creating an Air Hockey-like game using HTML5 canvas and Javascript. I've gotten pretty far, but detecting the collision of the mallet and the ball has me stumped. I've tried using the distance between the two circles and distance squared (to conserve CPU by bypassing square root). I can't figure out why the collision is not being detected.

Here's what I have: http://austin.99k.org/z_Archive/Air_Hockey/

Please take a look and help me figure it out. The source files are somewhat commented.

Answer 1

Your hit function is wrong, you should simply compute the distance between the two points (which you do correctly), and compare that to the minimum distance between the mallet and ball.

eg.

return distance_squared < radii_squared

You're actually (effectively) doing:

return -COLLIDEDISTANCE < radii_squared - distance_squared && radii_squared - distance_squared < COLLIDEDISTANCE

which requires any hit to be within 2 units of the edge, but the numbers i saw running through hit() implied you're at a scale factor that makes a single unit less than 1 pixel.

Answer 2

Hi ollie,

Still there is some problem in detecting collision.In most of the cases it works great but in some cases the ball overlaps mallet.We are unable to find the respective situation.Could you please help.Its urgent :)

Thanks in advance.

Shilpi