Phaser tutorial: HTML5 player movement as seen in iPad Magick game, using mostly tile maps

Some time ago I downloaded an iPad game called Magick.

It’s a retro platformer where a mage called Oz walks and jumps by himself, and you can summon a crate, but only one, to modify the terrain.

The way you control the player, which actually you don’t control, you can just make some changes to the level, is really interesting to build with Phaser.

Since the game is easier to play than to describe, have a look at what you are going to build:

The player walks and climbs on his own, you can only click anywhere on an empty spot to summon a crate, but you can submit only one crate at once. Will you be able to reach the upper platform on the left?

Before I show you the fully commented source code, please note the level has been built with Tiled and exported as JSON. I am telling you this because some of the names used in the game itself are taken from the JSON data in level map.

Here is the Tiled output:

And here is the fully commented source code, just a bunch of lines:

I always say the funniest game are built on the simplest concepts, and here’s another one.

Download the source code and suggest some features to add to the game.