移动端html5重力感应-白红宇

移动端html5重力感应

阅读量：5142 次

发布时间：2019-06-13

本文共 930 字，大约阅读时间需要 3 分钟。

下面是测试案例，只测试过itouch,iphone

重力感应主要用到两种事件：

1 orientationchange

这个事件在屏幕发生翻转时触发

window.orientation可获得设备的方向，一共有三个值0：竖直, 90：右旋, -90：左旋

deviceorientation

和

MozOrientation(firefox专用)

deviceorientation事件可获得三个值alpha,beta,gamma，分别代表绕Z轴的旋转角度(0~360)，

绕X轴的旋转角度

(-180~180)，

绕Y轴的旋转角度

(-90~90)

MozOrientation事件中

可获得三个值

z,x,y，

分别代表垂直加速度，左右的倾斜角度，前后的倾斜角度(取值范围：-1~1)

坐标系见下图

下面是示例游戏用到重力感应的代码：

      window.onorientationchange =  
function(e){ 
     game.hideNavBar();    
//屏幕翻转时隐藏地址栏
if(game.stage) game.stage.updatePosition();  
//更新舞台位置
}; 
window.ondeviceorientation =   
function(e)  
{ 
var ang; 
var o = window.orientation;   
//获取设备方向
if(o == 90){ 
        ang = e.beta;   
//设备横向1
    } 
else
if(o == -90){ 
        ang = -e.beta;   
//设备横向2
    } 
else
if(o == 0){ 
        ang = e.gamma;     
//设备纵向
    } 
if(ang > 5)  
    { 
        keyState[Q.KEY.RIGHT] =  
true; 
    } 
else
if(ang < -5)  
    { 
        keyState[Q.KEY.LEFT] =  
true; 
    } 
else
    { 
        keyState[Q.KEY.RIGHT] =  
false; 
        keyState[Q.KEY.LEFT] =  
false; 
    } 
} 