Using device orientation

In some situations, it can be useful to have access to the device orientation. For example, you can use it to control the avatar's movement. To do this, you can simply register an event handler that will receive an event each time the device orientation changes. The following code does exactly that:

if(window.DeviceOrientationEvent) {
  window.addEventListener("deviceorientation", function(event){
    var alpha = event.alpha;
     var beta = event.beta;
     var gamma = event.gamma;
     // do something with the orientation
  }, false);
}

The first if statement is there to check whether the device supports the device orientation API. Then we register an event handler that accesses the orientation of the device. This orientation is provided by three angles: alpha is the rotation around the z axis, beta is the rotation around the x axis, and gamma is the rotation around the y axis.

You already know what the x and y axes are; they are the same that we used to position...