HTML and CSS Reference
In-Depth Information
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
event object.
// Use either method
window.addEventListener("deviceorientation",function(eventData) {
// Handle event
});
$(window).on("deviceorientation",function(e) {
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.
