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]

Comments

  1. fightcube says:

    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. Simon says:

    Great. it works perfectly for me with minimal lag! Excellent!

  3. t3rminus says:

    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.

  4. Philip Stark says:

    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)

  5. spaceinvade says:

    Sweet! Very fast sync! After each game, I have to reload the web page and re-read the QR code. Iphone4 and Chrome on a PC.

  6. Galane says:

    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!

  7. skyrift says:

    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.

  8. Damien says:

    @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.

  9. somebody says:

    All Android 2.*.* users, you can use Opera Mobile to play this game ;)

  10. somebody says:

    All Android 2.3 users, you can use Opera Mobile to play this game ;)

  11. Whatnot says:

    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: http://www.wacomeng.com/web/WebPluginReleaseNotes.htm and http://www.wacomeng.com/web/index.html

  12. Sootie says:

    Works fine for me on andriod

    using galaxy s2 with andyx rom 4.03 and sylah 3 kernel

  13. rtui says:

    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

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 98,146 other followers