Thoughts from London, UK

Accelerometer support is available in Mobile Safari and all new android devices. This enables the browser to sense movement, speed and direction with Javascript on mobile & tablet devices. If we push the movement data from the mobile device instantly through a nodejs server to a browser, then we can control a game on the browser. This is exactly what we have put together in this fun little html5 demo.

Try the game before you go through the components that make up this demo.

Android / iOS controller

The user scans the QR code or visits the unique link created for them from the demo landing page to start the controller. The controller code reads accelerometer values and then passes the movement to the nodejs server.

The controller code detects movement from accelerometer and only pushes data to the nodejs server if there is a change in direction of the device. This reduces the data pushed from the phone to the server when compared to sending all the live accelerometer values to server. Finally, the value 14 in ax is set as a threshold to detect if the user is moving the device to the left or right.

Node.js server with SocketIO (Server side)

Node.js is a server-side JavaScript environment based on Google’s V8 Javascript engine. Programs are written in JavaScript, using event-driven, asynchronous I/O to minimize overhead and maximize scalability. Socket.IO sits on top of Node.js and makes it easy to deliver realtime data between almost every browser and the node server. Socket.IO code runs on the server and the client side. This makes Node.js and Socket.IO ideal candidates to be able push accelerometer values instantly from mobile safari to the desktop browser.

Each visitor to the game landing page is assigned an unique random id that links the browser and the iOS safari instance. User loads the URL provided on their iOS device and then safari detects accelerometer motion, which is then pushed by socket.io on client side to the node server. The randomly generated id is used as a room for the user so that push from user device is only sent to a particular browser.

The browser game can be played with the keyboard arrows or with iOS device movement. The space invaders game itself behaves like a standard HTML5 game which uses HTML canvas. Thanks to Erop Balyshev for developing the well tested game in a couple of days. The html game code is commented and you should be able to understand the underlying code for the game quite easily. The socket communication and movement based on feedback from the iOS device was later plugged into the game code.

– We are very impressed with the instant movement detection and control over the game.
– You can also run multiple browsers on your desktop with the same id get parameter and have it all controlled with the same iOS controller.
– Current space invaders game uses only X axis movement on the iOS device. However, all three dimension values are available on iOS safari ondevicemotion method. It is technically possible to do much more with the iOS device. Probably the ship can fire when user shakes the device?

Comments

I didn’t realise that you can grab accelerometer values from Safari on an iOS device.

Pingback:jsc: space invaders « The book of inspiration

Jacksaid on March 19, 2012 at 5:37 pm:

This is a great idea, and definitely has more applications than Space Invaders. One thing that would bother me, though, is the responsiveness of the controls. Because the input and the display aren’t connected locally, there’s an unavoidable gap between sending a command from the iPhone and displaying it in the browser. This is disorienting, and if you imagine something like a 3d camera moving around in a 3d space, that gap creates motion sickness, even if it’s only ~50ms.

The biggest problem with this is that there’s no way to fake the display to improve perceived responsiveness! You can’t display something immediately while waiting for the server to respond, reducing the perceived input gap, because displaying something relies on the server responding.

Jay Vaughansaid on March 19, 2012 at 8:07 pm:

Jack, I believe its an interesting GUI problem, but the thing is any lag at all can be appropriately indicated to the user, somehow. When the server doesn’t know, it just needs to say it doesn’t know (or, at the very least, achieve a GUI sync across the device/game interface, such that the user interface gui (lets call it a HUD), and the web-based game interface are at least time-sync’ed. This will make it easier to dissolve the lag with eye candy.

Tatonkasaid on March 20, 2012 at 10:57 am:

I believe the felt gap in responsiveness has a lot to do with the choice of the accelerometer as input. To demo the actual “mobile-device to server to client remote control web socket thingy” .. maybe a more simple (and potentially faster) button interface would have been better.

For the time being, I wouldn’t worry about motion sickness in 3D spaces, since this is rather far off for a browser implementation anyways. Lets grab the low hanging fruit here.

Very cool tech demo .. definitively something I will try to utilize. Thanks.

T.

Colin Myerscoughsaid on March 21, 2012 at 9:16 am:

This is the best I have seen in years!! I had to quit playing before I got addicted to the sweetness of the used technoligy.

Keep up the good work!!

Pingback:Blog ALL » Control this desktop Space Invaders game with your iPhone

It’s a bit over my head, so apologies if I’m misunderstanding things, but is there any scope for using Web Sockets (which I think has some support on desktop and mobile Safari, see caniuse.com/#search=websockets) to take the server out of the equation?

php-manualsaid on March 26, 2012 at 5:19 pm:

@Paul, Socketio is setup to fall back from websockets, xhr-polling, flash sockets and so on. So websockets need not be available on the browser.

You can take server out of the equation but that would need you to be on the same LAN probably? Also default out the box socketio cannot be used.

Pingback:Accelerometer-based game control using an iOS device courtesy of HTML5 - Hack a Day

Pingback:Hackaday « Cool Internet Projects

Philipsaid on March 27, 2012 at 12:52 pm:

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)

Dinasaid on March 27, 2012 at 1:39 pm:

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

Blaanidsaid on March 27, 2012 at 1:40 pm:

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.

RyanBrukesaid on March 27, 2012 at 1:56 pm:

mobile dev nub here. What else can Safari pull from the device? Seems to be many interesting applications for interactivity.

Pingback:Use Your iOS Device to Control Browser Based Games | ChurchMag

somebodysaid on March 27, 2012 at 5:47 pm:

please add option to invert controls in this demo so that android users could play it normaly to

php-manualsaid on March 28, 2012 at 8:13 am:

@somebody Thanks for the suggestion, we had few other users ask the same suggestion for Andorid based off Cyanogenmod. We will have a look at what we can do. Can you let us know the exact OS that you are using?

As a temporary solution you can hold your phone facing the monitor and you should be able to play the game normally 🙂

Dietmarsaid on March 28, 2012 at 3:51 pm:

Hello! Great idea! Is it possible to get the sources of that demo?
Would like to try it in my LAN and have some ideas what can be done apart from playing with that – even though playing is cool….:-)

Pingback:Accelerometer-based game control using an iOS device courtesy of HTML5 | CisforComputers

Steve Longhurstsaid on March 29, 2012 at 10:48 am:

It’s all working , a very cool bit of tech it is too.

Pingback:Spaceship Pilot, CARPE Slider, CasperJS, lazyload

kamendsaid on April 6, 2012 at 1:51 pm:

huy guys, I have been playing around with Node.js,Socket.io and Mobile Safari recently. I am just curious are you aware of the problem that when Safari goes to sleep (user presses the Home button) the socket will disconnect after a while and when you open Safari again it will crash. Do you know any solutions for this problem?

Moritz U.said on May 8, 2012 at 11:26 am:

This is awesome, and it also works on the Galaxy Nexus running Android 4.0.4. Only the accelerator values seems switched so the ship runs to the right when I tilt my device to the left.