HTML5 prototype of iOS hit “Hero Slide” made with Phaser – controlling the game with swipes

In 2016 (actually also in 2015, 2014, and so on back at least until 2010) you can’t create a tile game without allowing players to control it with gestures.

That’s why I am showing you how to control our Hero Slide prototype using swipes.

Let’s make a recap of the steps we saw so far:

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

In step 3 we covered:

* code optimization
* explosions

Finally in step 4 we improved the game by:

* adding animations
* allowing players to perform only legal moves

The game was controlled with WASD keys, so it’s time to allow players to move tiles using swipes. Here is the game:

Move tiles with WASD keys or with swipes and try to match normal tiles and bombs – focus the canvas first. I also added a different easing to the animation which removes the bombs, as well as a small delay to let the player figure out what’s happening.

Detecting swipes with Phaser is really easy, due to its wonderful event management, have a look at the commented code:

Without using any external library, it’s very easy to detect swipes with Phaser, featuring swipe distance, swipe time and swipe angle, mostly based on Phaser Point class.

We almost have a complete game to play, download the source code and play with it while you wait for next step.

  • Thanks Emanuele,
    I think most ever difficult thing to learn in the world is how to work with Phaser!
    Nice job! :)