注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

谈笑涧

已开通独立前端博客,请访问 http://www.candoudou.com

 
 
 

日志

 
 

【转载】移动端html5重力感应  

2013-04-22 12:01:09|  分类: js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
下面是测试案例,只测试过itouch,iphone
http://06wjin.sinaapp.com/billd/    
http://06wjin.sinaapp.com/billd/test.html

重力感应主要用到两种事件:
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)
 
坐标系见下图
 移动端html5重力感应 - FIR - 显微镜
 

下面是示例游戏用到重力感应的代码:
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;
    }
}

  评论这张
 
阅读(512)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017