HTML5 Physics sling with predictive trajectory like “Trick Shot” iOS game using Phaser + Box2D

Do you know Trick Shot game by Jonathan Topf?

It’s a game where all you have to do is throw a ball into a box, simple, a minimalist physics puzzler with 90 levels and an infinite supply of bouncy balls to get that perfect shot.

But more than this, it’s the perfect game to deconstruct to see how you can make it with Phaser and Box2D.

In this first part, we are going to create the routine which fires the ball, along with predictive trajectory.

This is what we are going to do:

Click and drag inside the red rectangle to create and charge the ball, release to launch it.

The predictive trajectory, just not to reinvent the wheel, has been taken from this official Phaser example, but if you want to see another attempt to create predictive trajectory, check the post develop a Flash game like Angry Birds using Box2D – predictive trajectory line.

I said we can make it with less than 100 lines of code, and here it is the full commented source code, 98 lines if I am not wrong.

I really hope to start seeing good HTML5 physics games thanks to Phaser and Box2D plugin.

Next time, I’ll add more features by adding 100 more lines of code.

Download the source code and guess what I am going to do with 100 more lines.

  • Sebaspa

    Hola quisiera saber como puedo hacer que funcione este ejemplo en mobile, Gracias.