Build 10 games and learn game development along the way in this fast paced game development course

Get the source code of 12 commercial games, loaded 50+ million times, and learn the secrets of game design

Learn how to make a successful Flash game from a real world example. Fully commented source code

Create realistic Flash physics games from scratch with advanced features, from Angry Birds to Crush the Castle

Add a virtual pad to play your HML5 games made with PuzzleScript on mobile devices

Last week I showed you BWBan a game created with PuzzleScript and I told you I was looking for a way to add mobile control to games.

Well, I made it. I added a semi-transparent, draggable virtual pad which calls checkKey PuzzleScript’s function. I used Brian Gonzalez’s pep plugin for jQuery to add drag functionality.

It should be optimized a bit, but it’s working and it represents a good starting point.

The changes to make to PuzzleScript generated files are very easy: just include the latest version of jQuery and pep plugin, then between <head> and </head> add:

At this time, you just need to create the pad somewhere between <body> and </body>

And here is its CSS:

Now, you can point your mobile devices to www.emanueleferonato.com/stuff/bwban_mobile/

and you will be able to play the game on mobile devices, like in this video made with Reflector:

Now, every PuzzleScript game can be played on mobile devices.

Download the full project. By the way, you should solve all 80 levels to see the awesome congratulations screen.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (5 votes, average: 3.40 out of 5)
Loading ... Loading ...
Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 3 comments

  1. Add a virtual pad to play your HML5 games made with PuzzleScript on mobile devices | Adobe

    on November 27, 2013 at 7:38 pm

    [...] Emanuele Feronato Now every HTML5 game made with PuzzleScript can also be played on mobile devices thanks to the [...]

  2. screeg

    on December 3, 2013 at 9:53 pm

    I was very interested in your virtual pad, since I was waiting on Stephen Lavelle to add this functionality to puzzlescript. My background is in 3D modeling and character animation, not programming, though I did teach myself quite a bit of AS2.0/3.0 back in the day.
    I tried downloading the .zip file of your ps project, substituted two of my own ps games, made the basic changes to the html, but I get no virtual pad in Firefox or Chrome. Your own index.html calls up the pad fine. (This is on a PC) Any ideas?
    I would love to get a few of these little games onto the Google Play store for $0.99. Have you thought about monetizing your work that way?

  3. Lucas

    on January 22, 2014 at 7:55 pm

    Can I find a video totorilal. Btw nice job.

Thank you for the download!!

I hope you will find it useful and make something interesting out of it

To keep up to date with the blog, why don't you like my Facebook page and follow me on Twitter?

Want to learn more? Don't miss this:

Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now

×