Chromium Blog
News and developments from the open source browser project
A classic boardwalk game rolls from your phone to your computer—using only your browser
۱۳۹۲ خرداد ۱۴, سهشنبه
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
:
Our
Google App Engine
application, built in
Go
, dynamically balances users across our relay servers.
A
Google Compute Engine
server maintains game state across synced devices.
Google Cloud Storage
speedily serves up the static assets.
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.
Posted by Pete LePage, Developer Advocate and Boardwalk King
برچسبها
$200K
1
10th birthday
4
abusive ads
1
abusive notifications
2
accessibility
3
ad blockers
1
ad blocking
2
advanced capabilities
1
android
2
anti abuse
1
anti-deception
1
background periodic sync
1
badging
1
benchmarks
1
beta
83
better ads standards
1
billing
1
birthday
4
blink
2
browser
2
browser interoperability
1
bundles
1
capabilities
6
capable web
1
cds
1
cds18
2
cds2018
1
chrome
35
chrome 81
1
chrome 83
2
chrome 84
2
chrome ads
1
chrome apps
5
Chrome dev
1
chrome dev summit
1
chrome dev summit 2018
1
chrome dev summit 2019
1
chrome developer
1
Chrome Developer Center
1
chrome developer summit
1
chrome devtools
1
Chrome extension
1
chrome extensions
3
Chrome Frame
1
Chrome lite
1
Chrome on Android
2
chrome on ios
1
Chrome on Mac
1
Chrome OS
1
chrome privacy
4
chrome releases
1
chrome security
10
chrome web store
32
chromedevtools
1
chromeframe
3
chromeos
4
chromeos.dev
1
chromium
9
cloud print
1
coalition
1
coalition for better ads
1
contact picker
1
content indexing
1
cookies
1
core web vitals
2
csrf
1
css
1
cumulative layout shift
1
custom tabs
1
dart
8
dashboard
1
Data Saver
3
Data saver desktop extension
1
day 2
1
deceptive installation
1
declarative net request api
1
design
2
developer dashboard
1
Developer Program Policy
2
developer website
1
devtools
13
digital event
1
discoverability
1
DNS-over-HTTPS
4
DoH
4
emoji
1
emscriptem
1
enterprise
1
extensions
27
Fast badging
1
faster web
1
features
1
feedback
2
field data
1
first input delay
1
Follow
1
fonts
1
form controls
1
frameworks
1
fugu
2
fund
1
funding
1
gdd
1
google earth
1
google event
1
google io 2019
1
google web developer
1
googlechrome
12
harmful ads
1
html5
11
HTTP/3
1
HTTPS
4
iframes
1
images
1
incognito
1
insecure forms
1
intent to explain
1
ios
1
ios Chrome
1
issue tracker
3
jank
1
javascript
5
lab data
1
labelling
1
largest contentful paint
1
launch
1
lazy-loading
1
lighthouse
2
linux
2
Lite Mode
2
Lite pages
1
loading interventions
1
loading optimizations
1
lock icon
1
long-tail
1
mac
1
manifest v3
2
metrics
2
microsoft edge
1
mixed forms
1
mobile
2
na
1
native client
8
native file system
1
New Features
5
notifications
1
octane
1
open web
4
origin trials
2
pagespeed insights
1
pagespeedinsights
1
passwords
1
payment handler
1
payment request
1
payments
2
performance
20
performance tools
1
permission UI
1
permissions
1
play store
1
portals
3
prefetching
1
privacy
2
privacy sandbox
4
private prefetch proxy
1
profile guided optimization
1
progressive web apps
2
Project Strobe
1
protection
1
pwa
1
QUIC
1
quieter permissions
1
releases
3
removals
1
rlz
1
root program
1
safe browsing
2
Secure DNS
2
security
36
site isolation
1
slow loading
1
sms receiver
1
spam policy
1
spdy
2
spectre
1
speed
4
ssl
2
store listing
1
strobe
2
subscription pages
1
suspicious site reporter extension
1
TCP
1
the fast and the curious
23
TLS
1
tools
1
tracing
1
transparency
1
trusted web activities
1
twa
2
user agent string
1
user data policy
1
v8
6
video
2
wasm
1
web
1
web apps
1
web assembly
2
web developers
1
web intents
1
web packaging
1
web payments
1
web platform
1
web request api
1
web vitals
1
web.dev
1
web.dev live
1
webapi
1
webassembly
1
webaudio
3
webgl
7
webkit
5
WebM
1
webmaster
1
webp
5
webrtc
6
websockets
5
webtiming
1
writable-files
1
yerba beuna center for the arts
1
Archive
2025
ژانویه
2024
دسامبر
اوت
ژوئن
مه
آوریل
مارس
فوریه
2023
نوامبر
اکتبر
سپتامبر
اوت
ژوئن
مه
آوریل
فوریه
2022
دسامبر
سپتامبر
اوت
ژوئن
مه
آوریل
مارس
فوریه
ژانویه
2021
دسامبر
نوامبر
اکتبر
سپتامبر
اوت
ژوئیه
ژوئن
مه
آوریل
مارس
فوریه
ژانویه
2020
دسامبر
نوامبر
اکتبر
سپتامبر
اوت
ژوئیه
ژوئن
مه
آوریل
مارس
فوریه
ژانویه
2019
دسامبر
نوامبر
اکتبر
سپتامبر
اوت
ژوئیه
ژوئن
مه
آوریل
مارس
فوریه
ژانویه
2018
دسامبر
نوامبر
اکتبر
سپتامبر
اوت
ژوئیه
ژوئن
مه
آوریل
مارس
فوریه
ژانویه
2017
دسامبر
نوامبر
اکتبر
سپتامبر
اوت
ژوئیه
ژوئن
مه
آوریل
مارس
فوریه
ژانویه
2016
دسامبر
نوامبر
اکتبر
سپتامبر
اوت
ژوئن
مه
آوریل
مارس
فوریه
ژانویه
2015
دسامبر
نوامبر
اکتبر
سپتامبر
اوت
ژوئیه
ژوئن
مه
آوریل
مارس
فوریه
ژانویه
2014
دسامبر
نوامبر
اکتبر
سپتامبر
اوت
ژوئیه
ژوئن
مه
آوریل
مارس
فوریه
ژانویه
2013
دسامبر
نوامبر
اکتبر
سپتامبر
اوت
ژوئیه
ژوئن
مه
آوریل
مارس
فوریه
ژانویه
2012
دسامبر
نوامبر
اکتبر
سپتامبر
اوت
ژوئیه
ژوئن
مه
آوریل
مارس
فوریه
ژانویه
2011
دسامبر
نوامبر
اکتبر
سپتامبر
اوت
ژوئیه
ژوئن
مه
آوریل
مارس
فوریه
ژانویه
2010
دسامبر
نوامبر
اکتبر
سپتامبر
اوت
ژوئیه
ژوئن
مه
آوریل
مارس
فوریه
ژانویه
2009
دسامبر
نوامبر
سپتامبر
اوت
ژوئیه
ژوئن
مه
آوریل
مارس
فوریه
ژانویه
2008
دسامبر
نوامبر
اکتبر
سپتامبر
Feed
Follow @ChromiumDev
Give us feedback in our
Product Forums
.