HTML5中包含一個幫助檢測device orientation的特性，使用這個特性可以在移動設(shè)備瀏覽器中判斷用戶設(shè)備的旋轉(zhuǎn)重力方向。

基本知識：Alpha, Beta, Gamma角度旋轉(zhuǎn)

當(dāng)用戶旋轉(zhuǎn)手機的時候，HTML5中定義了三個軸方向的旋轉(zhuǎn)，如下：

上圖可以看考，分別是z，x，y軸，對應(yīng)分別是：Alpha，Beta，Gamma，下面圖將更清楚的展示：

上圖是Alpha旋轉(zhuǎn)，　圍繞Z軸旋轉(zhuǎn)（綠線旋轉(zhuǎn)方向，水平）

上圖是Beta旋轉(zhuǎn)，　圍繞X軸旋轉(zhuǎn)（綠線旋轉(zhuǎn)方向，前后）

上圖是Beta旋轉(zhuǎn)，　圍繞Y軸旋轉(zhuǎn)（綠線旋轉(zhuǎn)方向，左右）

了解了基本幾個方向的旋轉(zhuǎn)，接下來介紹一下相關(guān)的方法：

window.addEventListener(“deviceorientation”, handleOrientation);

在HTML5中使用以上事件監(jiān)聽設(shè)備方向變化。

function handleOrientation(event) {
var absolute = event.absolute;
var alpha = event.alpha;
var beta = event.beta;
var gamma = event.gamma;
…
}

以上在定義的監(jiān)聽方法中通過event參數(shù)獲取設(shè)備的對應(yīng)Alpha, Beta和Gamma角度。參數(shù)定義如下：

DeviceOrientationEvent.absolute

DeviceOrientationEvent.alpha
DeviceOrientationEvent.beta
DeviceOrientationEvent.gamma

其中相關(guān)值：

alpha : 0 到 360度

Beta : -180到180度

Gamma : -90到90度

接下來為了驗證HTML5這個特性，我們使用Phaser來制作一個簡答的小游戲:

首先是導(dǎo)入Phaser類庫

<script type=”text/javascript” src=”http://cdn.gbtags.com/phaser/2.0.6/phaser.min.js”></script>

然后定義HTML代碼中游戲的容器元素：

<div id=”gamezone”></div>

接下來使用Phaser的游戲類生成游戲：

var game = new Phaser.Game(300,
400,
Phaser.CANVAS,
‘gamezone’,
{preload:preload , create:create ,update:update }
);

下面是具體方法：

/* 定義預(yù)加載方法，圖片，聲音等等 */
function preload(){
game.load.image(‘imagemoveing’, ‘http://www.gbtags.com/gb/laitu/50×50&text=圖片移動/DDDDDD/DDDDDD’);
//了解如何使用來圖工具，請移步至：http://www.gbtags.com/gb/gblaitu.htm
}

/* 定義游戲創(chuàng)建方法 */
var dogsprite,betadirection=0,gammadirection=0;

function create(){
//這里添加圖片并且居中顯示到屏幕上
dogsprite = game.add.sprite(game.world.centerX, game.world.centerY , ‘imagemoveing’);
dogsprite.anchor.set(0.5);
//啟動并添加物理效果
game.physics.startSystem(Phaser.Physics.ARCADE); //這里選擇使用的物理系統(tǒng),Phaser.Physics.ARCADE是缺省值
game.physics.arcade.enable(dogsprite);//保證dogsprite擁有物理特性
dogsprite.body.velocity.set(30);
}

function update(){
//移動游戲中的方塊圖片元素邏輯
}

最后執(zhí)行設(shè)備方向檢測，這里只檢測x,y軸，你向某個方向偏移設(shè)備，則獲取偏移量：

function deviceOrientationListener(event) {
betadirection = Math.round(event.beta);
gammadirection = Math.round(event.gamma);
}

if (window.DeviceOrientationEvent) {
window.addEventListener(“deviceorientation”, deviceOrientationListener);
} else {
alert(“您使用的瀏覽器不支持Device Orientation特性”);
}

最后，在Phaser的update方法中，根據(jù)偏移量來計算移動速度和方向，如下：

function update(){
var speed = 10*(Math.abs(betadirection)+Math.abs(gammadirection));
if(betadirection<0&&gammadirection<0){
game.physics.arcade.moveToXY(dogsprite, 0, 0, speed);
}else if(betadirection<0&&gammadirection>0){
game.physics.arcade.moveToXY(dogsprite, 300, 0, speed);
}else if(betadirection>0&&gammadirection>0){
game.physics.arcade.moveToXY(dogsprite, 300, 400, speed);
}else if(betadirection>0&&gammadirection<0){
game.physics.arcade.moveToXY(dogsprite, 0, 400, speed);
}else{
dogsprite.body.velocity.set(0);
}
}

以上使用最簡單的邏輯，移動設(shè)別后，就向四個象限移動，并且你社區(qū)偏移量越大，速度越快。速度邏輯如下：

var speed = 10*(Math.abs(betadirection)+Math.abs(gammadirection));

使用phaser的moveToXY方法執(zhí)行移動：

game.physics.arcade.moveToXY(dogsprite, 300, 400, speed);

注意：不同的設(shè)備及其瀏覽器的Alpha，Beta，Gamma可能設(shè)置不一樣，你需要具體針對性實現(xiàn)代碼。

好了，小游戲已經(jīng)基本搞定了，大家來試試吧。

總結(jié)

以上是生活随笔為你收集整理的使用Phaser和HTML5特性检测移动设备旋转重力方向的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。