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

基本知識：Alpha, Beta, Gamma角度旋轉

當用戶旋轉手機的時候，HTML5中定義了三個軸方向的旋轉，如下：

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

上圖是Alpha旋轉，　圍繞Z軸旋轉（綠線旋轉方向，水平）

上圖是Beta旋轉，　圍繞X軸旋轉（綠線旋轉方向，前后）

上圖是Beta旋轉，　圍繞Y軸旋轉（綠線旋轉方向，左右）

了解了基本幾個方向的旋轉，接下來介紹一下相關的方法：

window.addEventListener(“deviceorientation”, handleOrientation);

在HTML5中使用以上事件監聽設備方向變化。

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

以上在定義的監聽方法中通過event參數獲取設備的對應Alpha, Beta和Gamma角度。參數定義如下：

DeviceOrientationEvent.absolute

DeviceOrientationEvent.alpha
DeviceOrientationEvent.beta
DeviceOrientationEvent.gamma

其中相關值：

alpha : 0 到 360度

Beta : -180到180度

Gamma : -90到90度

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

首先是導入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 }
);

下面是具體方法：

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

/* 定義游戲創建方法 */
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); //這里選擇使用的物理系統,Phaser.Physics.ARCADE是缺省值
game.physics.arcade.enable(dogsprite);//保證dogsprite擁有物理特性
dogsprite.body.velocity.set(30);
}

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

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

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方法中，根據偏移量來計算移動速度和方向，如下：

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);
}
}

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

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

使用phaser的moveToXY方法執行移動：

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

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

好了，小游戲已經基本搞定了，大家來試試吧。

總結

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

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