利用HTML5的devicemotion事件實現手機搖一搖抽獎，年會抽獎，html5devicemotion

搖一搖JS腳本邏輯：

接下來是移動端JS腳本邏輯的實現，搖一搖的實現需借助html5新增的devicemotion事件，獲取設備在位置和方向上的改變速度的相關信息，該事件的基本使用如下：

if(window.DeviceMotionEvent) {

window.addEventListener('devicemotion', handler, !1);

lastTime= newDate();

}else{

alert('你的瀏覽器不支持搖一搖功能.');

}

devicemotion事件對象中有一個accelerationIncludingGravity屬性，該屬性包括：一個包含x、y 和z 屬性的對象，在考慮z 軸自然重力加速度的情況下，告訴你在每個方向上的加速度。該API的具體使用大家可以參考網上的資料，非常多，這里就不重復了。 搖一搖的具體邏輯如下：

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);//當差距大于設定的閥值并且時間間隔大于指定閥值時，觸發搖一搖邏輯

if (((deltaX > threshold) && (deltaY > threshold)) || ((deltaX > threshold) && (deltaZ > threshold)) || ((deltaY > threshold) && (deltaZ >threshold))) {

currentTime= newDate;

timeDifference= currentTime.getTime() -lastTime.getTime();//時間間隔

if (timeDifference >timeout) {//觸發搖一搖事件

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...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。