h5页面摇一摇游戏

来源：互联网发布：ubuntu 修改时区编辑：程序博客网时间：2024/05/06 16:52

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>HTML5 手机摇一摇</title>
<script type="text/javascript">
var color = new Array('#fff', '#ff0', '#f00', '#000', '#00f', '#0ff');
if(window.DeviceMotionEvent) {
var speed = 25;
var x = y = z = lastX = lastY = lastZ = 0;
window.addEventListener('devicemotion', function(){
var acceleration =event.accelerationIncludingGravity;
x = acceleration.x;
y = acceleration.y;
if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed) {
document.body.style.backgroundColor = color[Math.round(Math.random()*10)%6];
}
lastX = x;
lastY = y;
}, false);
}
</script>
</head>
<body>
HTML 5 手机摇一摇，在手机上运行的。
</body>
</html>

第二种

<script> var speed = 10; //定义摇一摇加速度的临界值值越小摇动的力度越小
var x = y = z = lastX = lastY = lastZ = 0; //初始化x,y,z上加速度的默认值
      var isHaveShaked = false;//用于记录是否在动画执行中
      function init() {
   //判断系统是否支持html5摇一摇的相关属性
         if (window.DeviceMotionEvent) {
            window.addEventListener('devicemotion', deviceMotionHandler, false);
         } else {
            alert('not support mobile event');
         }
      }
function deviceMotionHandler() {
         /*获取x,y,z方向的即时加速度*/
         var acceleration = event.accelerationIncludingGravity;
         x = acceleration.x;
         y = acceleration.y;
         z = acceleration.z;
         if (Math.abs(x - lastX) > speed || Math.abs(y - lastY) > speed
            || Math.abs(z - lastZ) > speed) {
            //摇一摇实际场景就是加速度的瞬间暴增爆减
            if (!isHaveShaked) {
                  alert(x); //自己测试各坐标的值。。
                  alert(y)
                  alert(z);
                  //手机震动1秒
                  if (navigator.vibrate) {
                     navigator.vibrate(1000);//震动1000毫秒
                  } else if (navigator.webkitVibrate) {
                     navigator.webkitVibrate(1000);
                  }
                  //模拟网络请求做想干的事
                  isHaveShaked = true;
                  setTimeout(function () {
                     isHaveShaked = false;
                     //.....
                  }, 2000);
            }
         }
         /*保存历史加速度*/
         lastX = x;
         lastY = y;
         lastZ = z;
      }
      $(function () {
         init();
      });

</script>

0 0