JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<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");

window.ondevicemotion = function(e) {
  var event = event || 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;
  }
}

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;
  }

}

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";

}, 1000);