HTML5 + JavaScript - Accelerometer

Get data from a mobile device's accelerometer sensor. Even some laptops are equipped with it, so you never know give it a try... if ball stays put you probably don't have an accelerometer chip on board... (might be worth quickly checking your device's settings to see if something's there but disabled).

by bcmoney

HTML

<meta name="viewport" content="width=device-width,user-scalable=yes" />
<div id="content">
  <h1>Accelerometer Javascript Test</h1>
  <div id="sphere"></div>
  <ul>
    <li>acceleration x: <span id="accelerationX"></span>g</li>
    <li>acceleration y: <span id="accelerationY"></span>g</li>
    <li>acceleration z: <span id="accelerationZ"></span>g</li>
    <li>rotation alpha: <span id="rotationAlpha"></span>degree</li>
    <li>rotation beta: <span id="rotationBeta"></span>degree</li>
    <li>rotation gamma: <span id="rotationGamma"></span>degree</li>
  </ul>
  test: <span id="test"></span>
</div>

CSS

#sphere {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  -webkit-radius: 50px;
  background-color: blue;
}

JavaScript

var x = 0,
  y = 0,
  vx = 0,
  vy = 0,
  ax = 0,
  ay = 0;

var sphere = document.getElementById("sphere");

if (window.DeviceMotionEvent != undefined) {
  window.ondevicemotion = function(e) {
    ax = event.accelerationIncludingGravity.x * 5;
    ay = event.accelerationIncludingGravity.y * 5;
    document.getElementById("accelerationX").innerHTML = e.accelerationIncludingGravity.x;
    document.getElementById("accelerationY").innerHTML = e.accelerationIncludingGravity.y;
    document.getElementById("accelerationZ").innerHTML = e.accelerationIncludingGravity.z;

    if (e.rotationRate) {
      document.getElementById("rotationAlpha").innerHTML = e.rotationRate.alpha;
      document.getElementById("rotationBeta").innerHTML = e.rotationRate.beta;
      document.getElementById("rotationGamma").innerHTML = e.rotationRate.gamma;
    }
  }

  setInterval(function() {
    var landscapeOrientation = window.innerWidth / window.innerHeight > 1;
    if (landscapeOrientation) {
      vx = vx + ay;
      vy = vy + ax;
    } else {
      vy = vy - ay;
      vx = vx + ax;
    }
    vx = vx * 0.98;
    vy = vy * 0.98;
    y = parseInt(y + vy / 50);
    x = parseInt(x + vx / 50);

    boundingBoxCheck();

    sphere.style.top = y + "px";
    sphere.style.left = x + "px";

  }, 25);
}


function boundingBoxCheck() {
  if (x < 0) {
    x = 0;
    vx = -vx;
  }
  if (y < 0) {
    y = 0;
    vy = -vy;
  }
  if (x > document.documentElement.clientWidth - 20) {
    x = document.documentElement.clientWidth - 20;
    vx = -vx;
  }
  if (y > document.documentElement.clientHeight - 20) {
    y = document.documentElement.clientHeight - 20;
    vy = -vy;
  }

}