Javascript 使用加速计检测震动，然后启动老虎机

所以我尝试使用震动来激活吃角子老虎机的旋转。当用户停止抖动时，老虎机停止

我当前正在使用此老虎机代码：

我知道我必须使用加速计，任何我应该如何开始的想法。或者我应该在哪里实现代码。我们非常感谢您提供的任何建议

---

谢谢：）

这是一个小样本，我用它展示了一些倾斜识别。它没有内置老虎机，但它应该很容易添加。它可以在Chrome上运行，也可以在Chrome for iOS上运行，其他的则不确定

HTML

HTML非常简单，仅用于提供结果的可视化表示。它只是一组嵌套的

s。一个是帮助透视，另一个是显示实际方向

<!--Perspective div-->
<div id="container">
   <!--Actual oriented div-->
   <div id="orienter">Accelerometer</div>
</div>

JS

JS是实际的面包和黄油部分。核心思想是，我们有一个间隔来检查当前方向与前一个方向之间的差异，如果两个方向之间的差异大小大于我们设置的阈值，我们将其注册为倾斜，并调用

tilthandler（）

tiltTime

和

tiltThreshold

是可配置的参数，如果方向变化超过

x旋转单位/y时间单位，则可以注册倾斜。我不知道旋转单位是否在浏览器实现之间标准化，所以在Chrome上只有1个单位的旋转在Firefox中可能是100个单位

// Check for device orientation support
if (window.DeviceOrientationEvent) {
   var
           // The Orientation when we last checked for tilt
           lastOrientation,
           // The current Orientation
           currentOrientation,
           // How often we check for a tilt
           tiltTime = 100,
           // How much we must rotate to tilt
           tiltThreshold = 100,
           // The div that shows the rotation
           odiv = document.getElementById("orienter"),
           // The interval that updates the tilt
           tiltInterval = setInterval(tiltCheck, tiltTime);

   // Class to hold orientation information
   function Orientation(x, y, z) {
      this.x = x || 0;
      this.y = y || 0;
      this.z = z || 0;
   }
   // Member to get difference between two Orientations
   Orientation.prototype.diff = function(o) {
      return new Orientation(
              this.x - o.x,
              this.y - o.y,
              this.z - o.z);
   };
   // Member to find magnitude of Orientation
   Orientation.prototype.mag = function() {
      return Math.sqrt(
              (this.x * this.x) +
              (this.y * this.y) +
              (this.z * this.z));
   };

   // Function to handle when titled
   function tiltHandler() {
      console.log("tilt");
      // Visualize the tilt
      odiv.className = "tilt";
      // Reset after a time
      setTimeout(function() {
         odiv.className = "";
      }, 2000);
   }

   // The function that checks for tilts
   function tiltCheck() {
      // If we have an orientation to compare to
      if (lastOrientation) {
         // Get how much we rotated
         var mag = currentOrientation.diff(lastOrientation).mag();
         // If it's more than the threshold
         if (mag > tiltThreshold) {
            // We tilted
            tiltHandler();
         }
      }
      // Always update the last orientation
      lastOrientation = currentOrientation;
   }

   // Add an orientation listener
   window.addEventListener("deviceorientation", function(e) {
      // Set the current orientation to the device orientation
      currentOrientation = new Orientation(e.beta, e.gamma, e.alpha);
      // Keep our div parralel to the floor (browser specific)
      odiv.style.webkitTransform =
              "rotateX(" + (currentOrientation.x) + "deg) " +
              "rotateY(" + (-currentOrientation.y) + "deg) " +
              "rotateZ(" + (currentOrientation.z) + "deg)";
   });
}

您可以使用开发工具中的仿真面板在Chrome中测试这些内容：

F12->ESC->
仿真选项卡
->
传感器
那么这是针对Android的吗？我看到了
Java
标记，但在那里也有
html
。这是一个基于手机的网站，通过HTML5API之类的东西使用加速计吗？你的目标是哪个设备？你使用哪种框架？这个插槽是用Javascript制作的，不是用Java制作的（这是两种不同的东西）。选择你想要开发什么样的应用程序，如果它在Android上，你可以查看查看这个问题，如果它实际上是HTML/JS：我现在已经在一个网站上工作了。理想情况下，当用户访问网站时，它将在ipad或iphone上工作。那么我应该看什么呢？？这不是一个真正的应用程序。谢谢。我会看一看，如果我有更多的QN，试着和老虎机结合。我会问你的。再次感谢：）
// Check for device orientation support
if (window.DeviceOrientationEvent) {
   var
           // The Orientation when we last checked for tilt
           lastOrientation,
           // The current Orientation
           currentOrientation,
           // How often we check for a tilt
           tiltTime = 100,
           // How much we must rotate to tilt
           tiltThreshold = 100,
           // The div that shows the rotation
           odiv = document.getElementById("orienter"),
           // The interval that updates the tilt
           tiltInterval = setInterval(tiltCheck, tiltTime);

   // Class to hold orientation information
   function Orientation(x, y, z) {
      this.x = x || 0;
      this.y = y || 0;
      this.z = z || 0;
   }
   // Member to get difference between two Orientations
   Orientation.prototype.diff = function(o) {
      return new Orientation(
              this.x - o.x,
              this.y - o.y,
              this.z - o.z);
   };
   // Member to find magnitude of Orientation
   Orientation.prototype.mag = function() {
      return Math.sqrt(
              (this.x * this.x) +
              (this.y * this.y) +
              (this.z * this.z));
   };

   // Function to handle when titled
   function tiltHandler() {
      console.log("tilt");
      // Visualize the tilt
      odiv.className = "tilt";
      // Reset after a time
      setTimeout(function() {
         odiv.className = "";
      }, 2000);
   }

   // The function that checks for tilts
   function tiltCheck() {
      // If we have an orientation to compare to
      if (lastOrientation) {
         // Get how much we rotated
         var mag = currentOrientation.diff(lastOrientation).mag();
         // If it's more than the threshold
         if (mag > tiltThreshold) {
            // We tilted
            tiltHandler();
         }
      }
      // Always update the last orientation
      lastOrientation = currentOrientation;
   }

   // Add an orientation listener
   window.addEventListener("deviceorientation", function(e) {
      // Set the current orientation to the device orientation
      currentOrientation = new Orientation(e.beta, e.gamma, e.alpha);
      // Keep our div parralel to the floor (browser specific)
      odiv.style.webkitTransform =
              "rotateX(" + (currentOrientation.x) + "deg) " +
              "rotateY(" + (-currentOrientation.y) + "deg) " +
              "rotateZ(" + (currentOrientation.z) + "deg)";
   });
}