js/main.js

   1 function deviceMotionEvents() {
   2         var firElem = document.getElementById("firElem");
   3         var secElem =document.getElementById("secElem");
   4         var thirElem = document.getElementById("thirElem");
   5         var circle = document.getElementById('circle');
   6         var audioElem = document.getElementById("audio_re");
   7         var x = 0, y = 0, vx = 0, vy = 0, ax = 0, ay = 0;
   8
   9         window.addEventListener("devicemotion", function(e) {
  10                 deviceMotionHandler(e);
  11                 playSoundHandler(e);
  12                 logDeviceMotionHandler(e);
  13         }, true);
  14
  15         function deviceMotionHandler(e) {
  16                 //Calculate the acceleration due to gravity
  17                 ax = e.accelerationIncludingGravity.x * 5;
  18                 ay = e.accelerationIncludingGravity.y * 5;
  19
  20                 vx = vx + ax;
  21                 vy = vy - ay;
  22
  23                 vx = vx * 0.98;
  24                 vy = vy * 0.98;
  25
  26                 x = parseInt(Math.round(x + (vx / 20)));
  27                 y = parseInt(Math.round(y + (vy / 20)));
  28
  29                 // Bound Check
  30                 if (x <= 0) {
  31                         x = 0;
  32                         vx = -vx;
  33                 }
  34                 if (y <= 0) {
  35                         y = 0;
  36                         vy = -vy;
  37                 }
  38                 if (x >= document.documentElement.clientWidth - 80) {
  39                         x = document.documentElement.clientWidth - 80;
  40                         vx = -vx;
  41                 }
  42                 if (y >= document.documentElement.clientHeight - 80) {
  43                         y = document.documentElement.clientHeight - 80;
  44                         vy = -vy;
  45                 }
  46
  47                 //Style insert
  48                 circle.style.bottom = y + "px";
  49                 circle.style.right = x + "px";
  50 }
  51
  52         function playSoundHandler(e) {
  53                 if(e.acceleration.x > 6){
  54                         audioElem.currentTime = 0;
  55                         audioElem.volume=1;
  56                         audioElem.play();
  57                 }
  58         }
  59
  60         function logDeviceMotionHandler(e) {
  61                 firElem.innerHTML = 'acceleration value<br><br> '
  62                         + '[ x value : '+ Math.round(e.acceleration.x) + " ]<br>"
  63                         + '[ y value : '+ Math.round(e.acceleration.y) + " ]<br>"
  64                         + '[ z value : '+ Math.round(e.acceleration.z) + ']';
  65
  66                 secElem.innerHTML = 'accelerationIncludingGravity value<br><br> '
  67                         + '[ x value : ' + Math.round(e.accelerationIncludingGravity.x) + " ]<br>"
  68                         + '[ y value : ' + Math.round(e.accelerationIncludingGravity.y) + " ]<br>"
  69                         + '[ z value : ' + Math.round(e.accelerationIncludingGravity.z) + ']';
  70
  71                 thirElem.innerHTML = 'rotationRate value<br><br> '
  72                         + '[ alpha value : ' + Math.round(e.rotationRate.alpha) + " degree ]<br>"
  73                         + '[ beta value : ' + Math.round(e.rotationRate.beta) + " degree ]<br>"
  74                         + '[ gamma value : ' + Math.round(e.rotationRate.gamma) + ' degree ]';
  75         }
  76 }
  77
  78 window.onload = function() {deviceMotionEvents();};