Accelerometer-based Game Control Using An IOS Device Courtesy Of HTML5

This game of Space Invaders is played by tilting your iPhone to the left or right. It’s a demonstration of HTML5 used to link devices in-browser. The only setup that’s required is for the base device to load up a webpage, then the control device scans a QR code (or just types in a link) to connect with the game. You can give it a try right now if you want.

It only works with iOS devices but we believe that’s because mobile Safari has the ability to poll accelerometer data and other browsers do not. If this was using on-screen buttons rather than the tilt controls it would work on any device that implements HTML5. The connection is facilitated by Node.js and Socket.IO. The QR code that is generated by the host machine’s page includes a unique ID which allows the control device to link with it. Once loaded, commands from the controller are sent via Socket.IO to the node on the host machine.

As with this HTML5-based sensor data application, we think this method is important because it allows control without the need for a standalone application. We’re hoping to see a lot of this in embedded projects in the future. By serving data to a smart phone or other device you remove to need for a physical user interface in your projects, which means you can make great things while spending less.

[via Reddit]

14 thoughts on “Accelerometer-based Game Control Using An IOS Device Courtesy Of HTML5

  1. WOW!!! it’s not syncing for me yet… probably due to the HADeffect… but this concept just BLEW MY MIND!!! NICE!!!!!!!! GOTTA THINK OF WAYS TO USE THIS!!!!! They show some details on their blog, but complete open source would be nice ;-)

  2. It’s not working for me… It says connected (and the game starts) but the game says “awaiting movement from an iOS device” at the top.

    The numbers for the accelerometer change on the iPhone (and I’m definitely tilting) the ship just doesn’t move.

    Sounds like a neat idea though.

  3. I can play it with no problems with my Desire Z running Android version 4.0.3 (something based off Cyanogenmod)

    right and left are switched, but else it works great. (meaning, i have to lean the device left to make the thingie go right and vice-versa)

  4. Just what the world needs, more server side apps. The “benefit” with this is to the app provider who can modify once and automatically all users get the update – including any new bugs.

    The big downside is when people are paying for things like this and the provider goes out of business or just decides to discontinue it.

    Microsoft did exactly that when they shut down access to XBox Live for the original XBox and all original XBox games. All that download stuff you paid money for? Poof! Gone!

  5. I’m pretty sure the demos for Firefox Mobile included a demo showing it implements HTML5, including a 2.5D diorama that moved as you tilted the phone. All client side stuff, I think.

  6. @t3rminus Same thing happened because i did not pair for 1 hour. Just refresh browser and iphone browser and i was up and running.

    Cool idea. I might build a 2D axis version one soon.

  7. Talking of input, did you know that Wacom tablet drivers actually install a browser plugin (also in firefox) that enables you to write apps for the web that let you use the wacom tablet in various ways? And seeing it can be read separately from the mousepointer, you know – as a unique input, there are some possibilities there, and it now also supports the tablets with touch.
    Plus a surprising number of people have wacom tablets.

    Related links: and

  8. We just participated in NodeKO 3 and made an app using the accelerometer. We ended up testing it in various devices and this is what we came up with:

    – MacBook Pro: Google Chrome
    – iPad 2/3, iPhone 4S: Google Chrome
    – iPhone 5: Chrome and Safari
    – Android 4: Google Chrome

    The demo of the game is here (and the link to the game is there also. Its hosting, however, ends when the competition ends:

Leave a Reply

Please be kind and respectful to help make the comments section excellent. (Comment Policy)

This site uses Akismet to reduce spam. Learn how your comment data is processed.