使用HTML5游戏引擎Phaser和HTML5设备方向(device orientation)检测特性开发的重力小游戏

发送到手机
使用"扫一扫"即可发送至手机

HTML5中包含一个帮助检测device orientation的特性,使用这个特性可以在移动设备浏览器中判断用户设备的旋转重力方向。

基本知识:Alpha, Beta, Gamma角度旋转

当用户旋转手机的时候,HTML5中定义了三个轴方向的旋转,如下:

上图可以看考,分别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角度。

接下来为了验证HTML5这个特性,我们使用Phaser来制作一个简答的小游戏,如果你对Phaser不熟悉,推荐观看如下两个极客的轻视频教程:

实例学习HTML5游戏框架phaser:基础篇之一

实例学习HTML5游戏框架phaser:基础篇之二

首先是导入Phaser类库(使用极客开源CDN:http://cdn.gbtags.com):

<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/50x50&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);

基本搞定,请大家在支持HTML5 device orientation的设备上运行本例子,单独地址如下(运行时,请确认锁住浏览器):

移动设备全屏演示地址

 注意:不同的设备及其浏览器的Alpha,Beta,Gamma可能设置不一样,你需要具体针对性实现代码

本例在iphone上测试通过,如果需要使用浏览器测试,推荐使用chrome,并且启动“模拟器和重力选项”,如下:

请在上面界面设置Beta和Gamma值,然后点击屏幕即可观看演示。

如果大家有任何问题,请在社区提问,或者查阅MDN相关资料,地址如下:

Detect Device Orientation 


使用HTML5游戏引擎Phaser和HTML5设备方向(device orientation)检测特性开发的重力小游戏

使用HTML5游戏引擎Phaser和HTML5设备方向(device orientation)检测特性开发的重力小游戏

分享: