HTML and CSS Reference
Next, to listen for the event, as usual you can either use addEventListener or jQuery. The only caveat
is that if you use jQuery you need to pull out the original event object to access the event properties you care
about because jQuery doesn't copy over the properties of the deviceorientation event into its universal
// Use either method
// Handle event
var eventData = e.originalEvent;
// Handle event
In both cases the eventData object holds the properties you care about.
Understanding the Event Data
The deviceorientation event triggers its callback with an object containing three different properties;
each property has a different axis of rotation: alpha, beta, and gamma.
• alpha - [0-360] : The heading of the device (think North, South, East, West). You can determine the
compass heading by subtracting alpha from 360.
• beta - [-180-180] : The amount you tilt the device front to back. A beta of 0 means the device is lying
flat. A beta of 90 means it is held vertically, straight up.
• gamma - [-90-90] : The amount you tilt the device left to right. A gamma of 0 means the device is lying
flat. A beta of -90 means the device is tilted vertically to the left.
Because alpha is dependent on the direction the user faces, you generally use only beta and gamma in
your games because those can be used no matter what direction players are sitting in.
alpha is primarily useful in augmented reality-type settings, such as on Android devices. (However, the
alpha value is not particularly accurate in the author's experience, so your mileage may vary.)
Trying Out Device Orientation
To try out the device orientation events, you can build a quick demonstration using the SVG and physics code
from Chapter 14, “Building Games with SVG and Physics.” Figure 24-1 shows the end result.