Link copied to clipboard
By Pete LePage, Developer Advocate and Boardwalk King
Cross-posted from the Chromium Blog
Last week we
launched Roll It, a
Chrome Experiment that links phones to computers and gets people out of their chairs and swinging. We wanted to share how we built a physical game experience with no dedicated hardware. It requires just the web, your computer and a phone.
Here’s a look at the APIs and browser-based features we used to create it.
Roll It is a three-dimensional (3D) experience, from the swing of your phone’s
accelerometer right up to the virtual models rendered on your computer’s
HTML5 Canvas. On the phone side, we hooked into browser events like
DeviceOrientation and
DeviceMotion to detect the speed and direction of a swing. On the computer side we rendered our scene using
Three.js and plugged in
Physijs to add physics to the ball and environment.
To sync the phone to the computer we employed
WebSockets which enable rapid two-way communication between devices via a central server.
For extra stability we built our backend on
Google Cloud Platform:
We couldn’t have brought this experiment to life without a great team. The theme for Roll It was composed by
Mr. Tim Healey.
Legwork Studio developed the interfaces and game environment, and teamed up with
Mode Set for the development.
To dig deeper into the technology behind Roll It, check out the
HTML5 Rocks Case Study, or join the team for a
Google Developers Live event this Friday, June 7, 2013 at 5pm GMT for an in-depth discussion.
Pete LePage is a Developer Advocate on the Google Chrome team and helps developers create great web applications and mobile web experiences.
Posted by Scott Knaster, Editor
By Pete LePage, Developer Advocate and Boardwalk King
