HTML5 prototype of iOS hit “Hero Slide” made with Phaser – handling animations and allowing only legal moves

To continue the Hero Slide prototype added a couple of weeks ago, we need to properly handle animations and allow only legal moves.

Let’s make a small recap:

In step 1 we saw how to

* Initialize the game
* Place random tiles on the map
* Move tiles with WASD keys

Then in step 2 we added these features:

* Add animation to tile creation and movement
* Match tiles

Finally in step 3 we covered:

* code optimization
* explosions

Talking about explosions, it wasn’t a nice effect due to a messy animation management, so in this 4th step we will see how to syncronize animations and don’t let new items appear if the player did not perform a legal move.

Move tiles with WASD keys and try to match normal tiles and bombs – focus the canvas first.

The key to handle animations is to keep track of how many tiles we are moving with movingTiles variable, which increases each time we are about to move a tile with a tween, and decreases once the tween is completed. This time we can know when every tween has been completed and act accordingly.

Each player move now is managed this way.

* We see if it’s a valid move. If not, we wait for another move.

* We move the tiles, disabiling player movement.

* We match all tiles according to game rules.

* For each bomb matched – if any – we make an explosion.

* We allow the player to move again.

And this is the commented source code.

Next time I will try to convert it into something playable, meanwhile download the source code.