Phaser Tutorial: create a HTML5 prototype of the iOS game “Dashy Panda”

Did you play Appsolute GamesDashy Panda?

It’s an endless runner with a Panda looking for rice bowls and avoiding spikes. When you touch the screen the Panda walks, when you release the screen the panda stops.

dashy

Very basic gameplay like in all endless runner games, a genre which is gaining a lot of popularity as written in this post, and there’s even an entire minibook about the making of this genre of games.

Like in most endless runner games, the character controlled by the player does not actually “run”, as it remains in a fixed position while the whole environment runs towards the character.

There are basically two features which are really interesting in the prototype we are about to build:

1) The panda isn’t completely immovable but it actually walks for a certain amount of pixels before stopping and having the environment run towards it

2) The spikes, the only deadly enemy at the moment, appear from the ground in a well randomized way, as they have random placement, raise to a random height at a random speed, then remain underground for a random amount of time.

Believe it or not, we will be able to develop the entire spike thing using only one tween. Tween management is a Phaser key feature, I was able to create an entire game only using tweens.

This is what we have at the moment:

Tap/click and hold to make the panda walk, release to make it stop, do not touch spikes. Controlling the panda may be a little confusing at the moment because you don’t have antyhing but deadly spikes moving, so probably you won’t be able to see the spikes before you die, anyway the game will get better with next update and you should focus on spikes creation and animation at the moment.

Here is the source code:

As you can see, spikes have quite a great randomness, just like the original game. Next time, I’ll show you how to collect rice bowls and a nice scrolling background, meanwhile download the source code.

  • mc

    Without background, it’s difficult to notice how much are you moving