“Trick Shot” HTML game prototype part 2 – jumping into the box

Did you enjoy the first part of Trick Shot HTML5 prototype? We saw how to create a predictive trajectory, now it’s time to make the ball jump into a box. A moving box of course.

First thing first, let’s have a look at what you are about to learn:

There are three elements: the red box where you can charge and fire the ball with predictive trajectory as seen in step 1, a static vertical bar to add some kind of difficult and a moving crate, which is a kinematic compound body.

If you aren’t familiar with kinematic bodies, check the post understanding Box2D kinematic bodies, while you will find everything you need to know about Phaser Box2D compound objects in the post the magic of compound objects with Box2D – HTML5 version powered by Phaser.

The aim of the game is throwing the ball into the moving crate.

I used the debug draw to let you see the structure of the crate, and the big rectangle inside the crate is a sensor, that is an ethereal body usually used to check for collisions. This is the way we will use to check for the ball to be inside the crate.

Now, have a look at the commented source code, with new lines highlighted:

And in just a few lines we gave a goal to the game. We aren’t able to check if the ball is inside the crate yet, but we’ll see it next time.

Meanwhile download the source code.

  • Astro

    Why this game not work local on my desktop?

    • Emanuele Feronato

      You have to make it run under a local host

  • Arthur

    How can I make it run on a touch screen ?

    Thank you