So recently at work I’ve gotten tasked with making a kids/educational game for the iPad.
At the time of the project inception I hadn’t had the mobile training that I received up to this point. So, being a good web developer and JavaScript aficionado I chose a JS/HTML approach.
The Framework
Rather than re-invent the wheel I choose to go with a nice little app called Kiosk Pro (http://www.kioskproapp.com/). This app handles all the heavy lifting as far as locking users into the application and is able to run a nice little local web server (no WiFi needed). We went ahead and spent the $5 and went with Pro (as we didn’t need all the remote updating capability with Plus). An additional feature is you can drop the files right into the app with the free version of DiskAid (Mac).
The JavaScript Libraries
I used the following libraries to give it some zing:
jQuery – used this for fast development, but if performance becomes an issue I can probably switch this out for Vanilla JS
HammerJS – (don’t hurt ’em) this library is a nice library for multi-touch and gestures (think swiping and tapping) http://eightmedia.github.io/hammer.js/
iOS Overlay – neat little library to display iOS style alerts. http://taitems.github.io/iOS-Overlay/
Move.js – for CSS3 animations. This works well to animate the HammerJS gestures. Swipe left and make the screen move left. If done right it can emulate native iPad transitions. http://visionmedia.github.io/move.js/
AudioFX – JS library for sound. https://github.com/jakesgordon/javascript-audio-fx/
Final Result
The final result is a simple kids game running totally on JavaScript and HTML without having to learn Objective-C. Admittedly, probably not as performant(sp) as native, but the user experience is perfectly fine.
I look forward to seeing how the kids interact with the game.
JS iPad Game
