gpt4 book ai didi

javascript - 使用加速度计检测震动,然后激活老虎机

转载 作者:行者123 更新时间:2023-11-28 01:23:38 24 4
gpt4 key购买 nike

所以我正在尝试实现使用摇动来激活老虎机的旋转。当用户停止摇动时,老虎机就会停止。

我目前正在使用此老虎机代码:http://odhyan.com/slot/ .

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

谢谢:)

最佳答案

这是我制作的一个小示例,用于展示一些倾斜识别。它没有内置老虎机,但添加起来应该很容易。它可以在 Chrome 上运行,也可以在 iOS 版 Chrome 上运行,不确定其他的。

jsFiddle

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()

tiltTimetiltThreshold是可配置参数,如果方向变化超过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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com