使用Phaser和HTML5特性检测移动设备旋转重力方向

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可能设置不一样，你需要具体针对性实现代码。

好了，小游戏已经基本搞定了，大家来试试吧。