Emanuele Feronato

Talking about Game development, Html, iOS and Javascript.

Now that I’m trying to create an iPhone game using HTML + jQuery, one of the most unusual things to develop in a web app is the swipe management.

Normally when you design web pages you don’t need to handle swipes because we expect the final user to interact with it with the mouse or the trackpad.

On mobile phones, people expect to use their fingers to interact with the content, and we have to meet their wishes if we want our app to be successful.

I am about to show you how easy it is: let’s start with the jQuery Sokoban prototype I published about a year ago, and change keyboard input with swipe input.

Have a look at the code in the original version, then look at this one:

At line 5 we have the viewport meta declaration as explained in this post but the core lies at line 9 when I call TouchSwipe, a jQuery plugin for touch devices.

Everything is managed by this fantastic plugin, since among its features you can find:

* Detects swipes in 4 directions, "up", "down", "left" and "right"
* Supports single finger or double finger touch events
* Supports click events both on the touchSwipe object and its child objects
* Definable threshold to determin when a gesture is actually a swipe
* Events triggered for swipe "start","move","end" and "cancel"
* End event can be triggered either on touch release, or as soon as threshold is met
* Allows swiping and page scrolling

So WASD key interaction you can find in the original version has been replaced by swipe interaction at lines 90-106, where every swipe longer than 50 pixels is translated into a movement.

To test it, point your mobile browser to this page, put your finger on the hero (the blue square) and move it with a swipe.

That wasy? Yes, that easy. The App store is getting closer and closer.