- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
所以我正在尝试实现使用摇动来激活老虎机的旋转。当用户停止摇动时,老虎机就会停止。
我目前正在使用此老虎机代码:http://odhyan.com/slot/ .
我知道我必须使用加速度计,不知道我应该如何开始。或者我应该在哪里实现代码。非常感谢您提供的任何建议。
谢谢:)
最佳答案
这是我制作的一个小示例,用于展示一些倾斜识别。它没有内置老虎机,但添加起来应该很容易。它可以在 Chrome 上运行,也可以在 iOS 版 Chrome 上运行,不确定其他的。
HTML
HTML 非常简单,只是为了提供结果的可视化表示。它只是一组 <div>
的嵌套集合s。一个用于帮助透视,另一个用于显示实际方向。
<!--Perspective div-->
<div id="container">
<!--Actual oriented div-->
<div id="orienter">Accelerometer</div>
</div>
CSS
CSS 也只是为了帮助可视化。 -webkit-perspective
给我们一些透视,其他类只是为了展示。 .tilt
是我们倾斜时的风格。
/*Perspective helps us see the rotation*/
div#container{
-webkit-perspective: 500px;
}
div#orienter{
text-align: center;
width: 10em;
background-color: lightcoral;
font-family: Arial;
font-size: 2em;
padding: 2em;
margin-top: 2em;
margin-left: auto;
margin-right: auto;
}
div#orienter.tilt{
background-color: red;
}
JS
JS 是实际的面包和黄油部分。核心思想是,我们有一个间隔来检查当前方向与先前方向的差异,如果两个方向之间的差异大小大于我们设置的阈值,我们将其注册为倾斜并调用 tiltHanlder()
tiltTime
和tiltThreshold
是可配置参数,如果方向变化超过x rot units per y time units
,则注册倾斜。 。我不知道浏览器实现之间的旋转单位是否标准化,因此在 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 -> Emulation Tab
-> Sensors
关于javascript - 使用加速度计检测震动,然后激活老虎机,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22990914/
大家早上好! 我遇到以下问题:我有传感器加速度计并添加了一个可以帮助我输入另一个 Intent 的按钮,但不知道为什么这个按钮不起作用!有什么建议吗?谢谢帮助!! 程序是这样的: package co
我想使用手机加速计来滚动球中的球。运动有效正确的是,问题在于球撞到墙时。我怎样才能顺利滚动球沿着大球内侧滑动的动画? 这是我当前移动球并检查交点的代码: onSuccess: function
我是 Core Motion 的新手,我很困惑。有人可以用简单的术语解释这些输入衡量的是什么以及它们如何有用吗? 最佳答案 加速度计通过“感觉”施加到设备上的运动力来测量相对于重力的运动。运动力可以描
尝试测量基于距离的加速度(移动加速度计)。如果那是真的 Accelerometer { id: accel dataRate: 1000 / 25 onReadingChang
我需要实现一个震动识别器,我正在使用设备上的加速度计来实现这一点。但是,当我检查从传感器获得的值时,它们似乎因设备而异。例如,我在一台设备上得到 0-8 的值范围作为力(经过一些计算),在另一台设备上
我一直在尝试使用 sensors 实现陀螺仪图像查看器包,然而,结果似乎非常滞后。我在 YouTube 上发现了一个类似的项目它试图实现类似的目标,但正如您在视频中看到的那样,动画也非常滞后。 以下代
我必须找到解决问题的最佳方法,尝试识别 body 运动(口袋里有 iPhone),例如行走、停止、左转/右转、坐下。 我正在考虑只是启发式地查找与每个操作相对应的数据,然后根据该数据(带有阈值)检查传
如何平滑 iPhone/iPod Touch 的加速计? 最佳答案 您可以在使用之前对传入数据应用过滤器来平滑加速度计数据。您要做的第一件事是为您的过滤器设置一个常量。 #define kFilter
我想使用陀螺仪、加速度计和磁力计来获得 3 轴完全平滑的旋转。 第一个问题是我的输出有很大的噪音,我想知道如何消除它。 第二个问题是陀螺仪漂移,我认为应该用卡尔曼滤波器来解决。 第三个问题是加速度计。
我编写了让玩家左右移动的代码,当玩家向左移动时它有一个动画,当他向右移动时它有另一个动画。 这是代码(dt 是 deltaTime): // Moving player desktop
我最近在我的摩托罗拉 Droid 上使用 Android SDK 和适用于 Android SDK 的 Adobe AIR 来研究 Android 加速度计。我注意到加速度计工作得很好,但我想知道
我想创建一个用户在开车时无法打开短信的应用程序(意味着通过检查 android 设备特定速度的加速度计)。在 android 中是否可行,如果是,那么我们如何做到这一点。谢谢。 .尼山贾恩 最佳答案
我正在开发一个 iPhone 应用程序,我们试图在其中计算移动汽车的加速度。类似的应用程序已经完成了这一点(Dynolicious),但不同的是,这个应用程序是为一般城市驾驶而设计的,而不是在拖拉带上
当水平放置在平面上时,我的 Galaxy S4 报告恒定加速度 X:0.2 Y:-0.1 Z:10.4 由于它平稳地水平放置在 table 上,因此期望报告 X:0 Y:0 Z:10.4 通过检查与我
我目前正在开发一个 android 应用程序。我必须用事件时间记录加速度计传感器事件坐标。我得到了像“3497855005850”这样的传感器事件时间戳,但我无法将事件时间戳转换为用户可读的日期时间格
我正在尝试构建一个应用程序,用于从我的手机上读取加速度计的值,该应用程序仅支持 Android 2.1。 如何使用兼容 2.1 的代码从加速度计中读取数据? 最佳答案 从这里开始: public cl
我有两个问题: 1. 是否可以检索 b2Body 的当前 X 坐标?我知道 API GetPosition 但这还不够具体,我需要专门的 X 坐标。 2. 是否可以在我的 UIAcceleromete
Phonegap 加速度计似乎返回如下 y 值: // +10 y axis = straight up = 0/360 deg // -10 y axis = straight down = 180
我一直在使用这个代码 Android: I want to shake it实现摇动运动检测器。但实际上当我在我的智能手机上运行它时,它什么也没做。我尝试使用断点来检查,但它永远不会进入 if (mA
我正在 Android 中开发一个应用程序以及 Android Wear 支持。在查看来自 https://developer.android.com/training/building-wearab
我是一名优秀的程序员,十分优秀!