移動端html5重力感應

下面是測試案例，只測試過itouch,iphone

http://06wjin.sinaapp.com/billd/     

http://06wjin.sinaapp.com/billd/test.html

重力感應主要用到兩種事件：

1 orientationchange

     這個事件在屏幕發生翻轉時觸發

     window.orientation可得到設備的方向，一共有三個值0：豎直,   90：右旋,   -90：左旋

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