html5重力感应事件

 if (window.DeviceMotionEvent) {
                window.addEventListener(‘devicemotion‘,deviceMotionHandler, false);
            }
            var speed = 30;//speed
            var x = y = z = lastX = lastY = lastZ = 0;
            function deviceMotionHandler(eventData) {
                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) {
                    //简单的摇一摇触发代码
                    alert(1);
                }
                lastX = x;
                lastY = y;
                lastZ = z;
            }

摇一摇触发事件,感觉还是蛮高大上的

时间: 2024-10-12 09:08:02

html5重力感应事件的相关文章

H5案例分享:html5重力感应事件

html5重力感应事件 一.手机重力感应图形分析 1.设备围绕z轴的旋转角度为α,α角度的取值范围在[0,360). 设备在初始位置,与地球(XYZ)和身体(XYZ)某个位置对齐. 设备围绕z轴的旋转角度为α,并与先前的x和y轴位置对比,显示x,y轴新坐标为x0和y0. 2.设备围绕x轴的旋转角度为β,β角度的取值范围在(-180,180). 设备围绕x轴的旋转角度为β,并与先前的y和z轴的位置对比,显示y,z轴新坐标为y0和z0. 3.设备围绕y轴的旋转角度为γ,γ角度的取值范围在(-90,9

Cocos2D-X2.2.3学习笔记9(处理重力感应事件,移植到Android加入两次返回退出游戏效果)

这节我们来学习Cocos2d-x的最后一节,怎样处理重力感应事件,移植到Android后加入再按一次返回键退出游戏等.我这里用的Android,IOS不会也没设备呃 效果图不好弄,由于是要移植到真机上的. #ifndef __HELLOWORLD_SCENE_H__ #define __HELLOWORLD_SCENE_H__ #include "cocos2d.h" using namespace cocos2d; class HelloWorld : public cocos2d:

HTML5重力感应小球冲撞动画实现教程

今天我们来分享一款很酷的HTML5重力感应动画教程,这款动画可以让你甩动页面中的小球,小球的大小都不同,并且鼠标点击空白区域时又可以生成一定数量的小球.当我们甩动小球时,各个小球之间就会发生互相碰撞的效果,并且在运动过程中模拟了重力感应的物理效果.你可以在DEMO演示中来尝试一下. 你也可以在这里查看在线演示 接下来我们来分析一下这款超酷的HTML5重力动画实现的思路及源码,主要由HTML代码和Javascript代码组成. HTML代码: <div id="canvas">

《开发之旅》学习笔记:重力感应事件

监听事件的时候使用的是是cc.eventManager.addListener,包含两个参数,一个是监听的事件,一个是节点. 第一个参数对象中,除了触发事件外,要声明是何种event 重力感应事件有两个返回参数accelerometerInfo以及event 一下DEOMO为一个重力感应小球运动 /* 重力感应 事件 */ var AccelerometerLayer = cc.Layer.extend({ ctor: function () { this._super(); var winSi

HTML5 重力感应效果,实现摇一摇效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="format-detect

移动端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(fi

html5重力感应

orientationchange判断屏幕翻转 window.orientation可以获取屏幕的方向 var orientationTimmer = null; window.addEventListener(window['onorientationchange'] ? 'orientationchange' : 'resize', function(){ clearTimeout(orientationTimmer); orientationTimmer = setTimeout(func

HTML5+ 获取手机重力感应 ( 三个方向的加速度 )

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>手机重力感应</title> <script type=&q

html5 获取 陀螺仪,重力感应(转发)

DeviceOrientationEvent是获取方向,得到device静止时的绝对值:    DeviceMotionEvent是获取移动速度,得到device移动时相对之前某个时间的差值比 设备定位API,该API允许你收集设备的方向和移动信息.此外,该API只在具备陀螺仪功能的设备上使用. <html> <head><title>DeviceOrientationEvent</title><meta charset="UTF-8&quo