There are some solutions out there that turn your smartphone into a Wii-style controller, but many of them require a dedicated app on your phone and even a browser plugin on your desktop. With HTML5 and WebSockets you can achieve this very quickly and easily without the need of pre-installing anything on your machine or your phone.
All you need is:
- A desktop browser: The game is “hosted” by the desktop browser. It renders the UI of the game using HTML5 canvas and WebGL.
Note: You can check here if your desktop browser supports WebGL. - A smartphone (with a browser): Smartphones can take a variety of input source, like touch, tilt, GPS, proximity, compass, camera, microphone. Many of these input sources are accessible from JavaScript, allowing you to easily control your game.
- A WebSocket server: The desktop and the smartphone(s) have to communicate through a fast, low latency channel – exactly what WebSocket was designed to do. The WebSocket standard doesn’t provide pier-to-pier connectivity, so you’ll need a server that routes the messages between the smartphone(s) and the desktop.
If you use a WebSocket server, like the Kaazing WebSocket Gateway that provides higher level protocols on top of WebSockets, your architecture can be kept very simple. You don’t need to write a single line of server-side code, the JavaScript code running in the desktop browser and the smartphone does all the job.
To demonstrate the power of no server-side code, we built a demo using the Java Message Service (JMS) edition of the Kaazing WebSocket Gateway. The advantage of using JMS in your JavaScript code directly is that with the pub/sub model of JMS you can very easily direct the messages between the smartphone(s) and the desktop browser.
The flow for the player is very simple:
- Bring up the game in your desktop browser: http://demo.kaazing.com/racer
- Enter the URL in your smartphone browser, as shown in the bottom of the desktop browser: http://demo.kaazing.com/racer/ws
- Enter the unique ID when prompted by your smartphone. This unique ID connects the game instance running in your desktop browser to the smartphone you use as your remote controller.
The race car is controlled simply by tilting your phone. Tilting the phone triggers JavaScript events which result in JMS messages sent through the WebSocket gateway to the desktop browser.
Note: For this demo to work you need a smartphone that supports the JavaScript tilt APIs. We tested the demo with devices running iOS 4 and above.
After watching the video how it works, take it for a test drive.
Mobile is all the rage these days — and it should be. Many website owners believe creating a separate mobile website is the solution, with browser sniffing to redirect all “mobile” traffic to a separate m.example.com domain. But it turns out that most of the time this is a terrible solution. Come hear Jen Simmons talk about how there’s only one web — not a mobile web separate from the desktop web. And learn how you can use HTML5 and responsive web design to create one unified website or web app for your project and Just Have It Work™ on a wide range of devices.
The premise and the promise of using web technologies for building mobile apps is well understood. But are we there yet? This presentation takes an honest look at the state of the art of mobile standards and implementations. We discuss what can be built, what has been built – and of course what will soon be possible – with these exciting tools and approaches.
Learn about programming charts and graphs, animations, drawing applications and other early use-cases for the HTML5 canvas element. Come explore the canvas API including shapes, styles, transformations, compositing, images and animation. Along the way we’ll explore examples on both the frivolous and more practical sides of the scale.
