“Trick Shot” HTML5 game prototype part 3 – handling collisions

Here we go with the 3rd part of Trick Shot HTML5 game prototype. I showed you how to charge and launch the ball in step 1, and how to create a moving crate along with an obstacle in step 2.

Now it’s time to handle collisions to determine if the ball entered in the crate without touching its opened top.

Let’s have a look at what we are going to create:

You should know how to play, click and drag inside red box to create and charge the ball, release to launch the ball and try to make it fall inside the crate. If the ball falls inside the crate, that is if the ball hits the sensor, we set ball restitution to zero to make it stop inside the crate. If the ball touches crate opened top, then I destroy it. The original game does not work this way, but it’s just a prototype to show you how to handle collisions.

And this is the commented source code, with new lines highlighted.

Now you can make your Trick Shot levels. Next time I will show you the first couple of levels, meanwhile download the source code

  • Arthur

    Great TUTO but you miss to highligh line 76 & 77.

    Thank you