A classic boardwalk game rolls from your phone to your computer—using only
your browser
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
