Build a HTML5 game like “Ballz” using Phaser and ARCADE physics

We are going to start the new year with a new tutorial series, this time we’ll see how to create a HTML5 version of Ballz by Ketchapp Studio.

It’s an interesting take to the brick breaker genre, with easy and intuitive controls as you should expect from any mobile game.

Before we start coding, let’s have a look at the game area:

We are going to use ARCADE physics to handle the game. We don’t need any complex engine like Box2D because this game does not feature friction, gravity, or realistic collision detection, so we are using the simplest physics engine Phaser provides.

In this first part, we are going to create the game field, the ball, the fake predictive trajectory and the player interaction as well as the physics involved in launching the ball.

Have a look at the result:

Tap/click and drag to the bottom to aim the ball, release to launch it.

If you have a mobile device, you can play it directly from this link.

And this is the completely commented source code, the entire prototype was made in 80 lines of code, which is quite awesome:

In next step we’ll add targets and multiball, meanwhile download the source code.

  • Richnou

    Really nice !

    The predictive trajectory using a sprite is so simple and so… powerfull !!!

    In my game PolaPolaa, i had to do lots of math for that. You are great !

    (And happy new year)