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

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

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

浏览器对HTML5特性检测工具Modernizr
最近在做公司移动端运营的项目,需求中多处地方都会涉及动画.相信很多前端开发都会有这种感触,对CSS3中的动画属性很熟悉,但是由于对动画运动过程的理解不深入,经常只能望而止步.CSS3中动画这在Web页 ...
HTML5 特性检测：Canvas（画布）
你或许会问:"如果早期的浏览器不支持HTML5我该如何开始使用它呢?".但是这个问题本身就会让人产生误解.HTML5只是一些特性的集合,因此你不能说检测浏览器"是否支持H ...
html5 --- 特性检测
使用Moderniz库可以对H5的特性进行检测,下载网址: https://modernizr.com // 在HTML 中的head标签中导入 <script src="/moder ...
支持html5特性的浏览器,HTML 5浏览器的支持情况
我经常看到有很多人询问HTML5某个特性当前各浏览器的支持情况.的确,因为HTML5内容庞大,特性众多,而浏览器的支持情况又混杂不一,随时都有可能变化,所以了解起来比较困难.在这里,我汇总了一些常用的 ...
HTML 18 HTML5 特性 18.10 HTML5 无障碍
HTML 文章目录 HTML 18 HTML5 特性 18.10 HTML5 无障碍 18.10.1 什么是无障碍 What is accessibility? 18.10.2 HTML: 为无障碍提 ...
功率放大器在铁磁钢材应力特性检测研究中的应用
实验名称:功率放大器在铁磁钢材应力致磁各向异性定量检测特性研究中的应用实验目的:本实验探究了应力致磁各向异性的物理表现及其定量检测应力的特性,设计搭建了实验系统,制作了铁磁性Q195钢材平板试件,在 ...
细说浏览器特性检测（2）-通用事件检测
在上一篇中介绍了jQuery1.4版本新增的几个浏览器特性检测方案和具体的目的,本文将以事件为中心,介绍一个较为完整.通用的事件检测方案. 事件检测,即检测某一事件在不同的浏览器中是否存在(可用),这 ...
html 移动设备不显示,IT兄弟连 HTML5教程在移动设备上设置原始大小显示
原标题:IT兄弟连 HTML5教程在移动设备上设置原始大小显示在iPhone系列和iPod Touch中使用的是Safari浏览器,它支持前面介绍的媒体查询表达式.例如,使用iPhone 320p ...
python如何测试仪器_使用python检测一个设备是否ping的通
标签: 使用python检测一个设备是否ping的通一,subprocess以及常用的封装函数运行python的时候,我们都是在创建并运行一个进程.像Linux进程那样,一个进程可以fork一个子 ...

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

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

最新文章

热门文章