苹果手机html5摇一摇游戏戏码,利用HTML5的devicemotion事件实现手机摇一摇抽奖，年会抽奖，html5devicemotion...
利用HTML5的devicemotion事件實現(xiàn)手機搖一搖抽獎，年會抽獎，html5devicemotion
搖一搖JS腳本邏輯：
接下來是移動端JS腳本邏輯的實現(xiàn)，搖一搖的實現(xiàn)需借助html5新增的devicemotion事件，獲取設備在位置和方向上的改變速度的相關信息，該事件的基本使用如下：
if(window.DeviceMotionEvent) {
window.addEventListener('devicemotion', handler, !1);
lastTime= newDate();
}else{
alert('你的瀏覽器不支持搖一搖功能.');
}
devicemotion事件對象中有一個accelerationIncludingGravity屬性，該屬性包括：一個包含x、y 和z 屬性的對象，在考慮z 軸自然重力加速度的情況下，告訴你在每個方向上的加速度。該API的具體使用大家可以參考網(wǎng)上的資料，非常多，這里就不重復了。 搖一搖的具體邏輯如下：
functionhandler(e) {var current =e.accelerationIncludingGravity;varcurrentTime;vartimeDifference;var deltaX = 0;var deltaY = 0;var deltaZ = 0;//記錄上一次設備在x,y,z方向上的加速度
if ((lastX === null) && (lastY === null) && (lastZ === null)) {
lastX=current.x;
lastY=current.y;
lastZ=current.z;return;
}//得到兩次移動各個方向上的加速度絕對差距
deltaX = Math.abs(lastX -current.x);
deltaY= Math.abs(lastY -current.y);
deltaZ= Math.abs(lastZ -current.z);//當差距大于設定的閥值并且時間間隔大于指定閥值時，觸發(fā)搖一搖邏輯
if (((deltaX > threshold) && (deltaY > threshold)) || ((deltaX > threshold) && (deltaZ > threshold)) || ((deltaY > threshold) && (deltaZ >threshold))) {
currentTime= newDate;
timeDifference= currentTime.getTime() -lastTime.getTime();//時間間隔
if (timeDifference >timeout) {//觸發(fā)搖一搖事件
dealShake();
lastTime= newDate;
}
}
lastX=current.x;
lastY=current.y;
lastZ=current.z;
}
不考慮各等獎的中獎概率問題
最終完整代碼示例：
1
2
3
4
5
6
搖一搖抽獎7
8 html,body{width:100%;height:100%;background-color:#000;margin:0;overflow:hidden;}
9 .tip{position:absolute;bottom:30px;left:10px;color:#fff;font-family:'楷體';text-align:center;right:10px;height:32px;line-height:32px;background-color:rgba(255,255,255,.4);border-radius:3px; }.tip.active{-webkit-animation:jump 1.5s linear;animation:jump 1s linear; }
10
11
12
13
總結
以上是生活随笔為你收集整理的苹果手机html5摇一摇游戏戏码,利用HTML5的devicemotion事件实现手机摇一摇抽奖，年会抽奖，html5devicemotion...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： XIRR内部收益率
- 下一篇： HTML5带音乐手机摇一摇抽奖代码