苹果手机html5摇一摇游戏戏码,利用HTML5的devicemotion事件实现手机摇一摇抽奖,年会抽奖,html5devicemotion...
利用HTML5的devicemotion事件实现手机摇一摇抽奖,年会抽奖,html5devicemotion
摇一摇JS脚本逻辑:
接下来是移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的devicemotion事件,获取设备在位置和方向上的改变速度的相关信息,该事件的基本使用如下:
if(window.DeviceMotionEvent) {
window.addEventListener('devicemotion', handler, !1);
lastTime= newDate();
}else{
alert('你的浏览器不支持摇一摇功能.');
}
devicemotion事件对象中有一个accelerationIncludingGravity属性,该属性包括:一个包含x、y 和z 属性的对象,在考虑z 轴自然重力加速度的情况下,告诉你在每个方向上的加速度。该API的具体使用大家可以参考网上的资料,非常多,这里就不重复了。 摇一摇的具体逻辑如下:
functionhandler(e) {var current =e.accelerationIncludingGravity;varcurrentTime;vartimeDifference;var deltaX = 0;var deltaY = 0;var deltaZ = 0;//记录上一次设备在x,y,z方向上的加速度
if ((lastX === null) && (lastY === null) && (lastZ === null)) {
lastX=current.x;
lastY=current.y;
lastZ=current.z;return;
}//得到两次移动各个方向上的加速度绝对差距
deltaX = Math.abs(lastX -current.x);
deltaY= Math.abs(lastY -current.y);
deltaZ= Math.abs(lastZ -current.z);//当差距大于设定的阀值并且时间间隔大于指定阀值时,触发摇一摇逻辑
if (((deltaX > threshold) && (deltaY > threshold)) || ((deltaX > threshold) && (deltaZ > threshold)) || ((deltaY > threshold) && (deltaZ >threshold))) {
currentTime= newDate;
timeDifference= currentTime.getTime() -lastTime.getTime();//时间间隔
if (timeDifference >timeout) {//触发摇一摇事件
dealShake();
lastTime= newDate;
}
}
lastX=current.x;
lastY=current.y;
lastZ=current.z;
}
不考虑各等奖的中奖概率问题
最终完整代码示例:
1
2
3
4
5
6
摇一摇抽奖
7
8 html,body{width:100%;height:100%;background-color:#000;margin:0;overflow:hidden;}
9 .tip{position:absolute;bottom:30px;left:10px;color:#fff;font-family:'楷体';text-align:center;right:10px;height:32px;line-height:32px;background-color:rgba(255,255,255,.4);border-radius:3px; }.tip.active{-webkit-animation:jump 1.5s linear;animation:jump 1s linear; }
10
11
12
13
苹果手机html5摇一摇游戏戏码,利用HTML5的devicemotion事件实现手机摇一摇抽奖,年会抽奖,html5devicemotion...相关推荐
- 摇一摇抽奖 php,利用HTML5的devicemotion事件实现手机摇一摇抽奖,年会抽奖
摇一摇JS脚本逻辑: 接下来是移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的devicemotion事件,获取设备在位置和方向上的改变速度的相关信息,该事件的基本使用如下:if (win ...
- 利用HTML5的devicemotion事件实现手机摇一摇抽奖,年会抽奖
摇一摇JS脚本逻辑: 接下来是移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的devicemotion事件,获取设备在位置和方向上的改变速度的相关信息,该事件的基本使用如下: if (wi ...
- html打飞机游戏代码,利用HTML5 Canvas实现打飞机游戏
这篇文章主要介绍了利用HTML5 Canvas制作一个简单的打飞机游戏,作者也给出了相关的Javascript代码,需要的朋友可以参考下 之前在当耐特的DEMO里看到个打飞机的游戏,然后就把他的图片和 ...
- html5实现粒子效果的文字,利用HTML5实现Canvas粒子文字特效
特效描述:利用HTML5实现 Canvas 粒子文字特效.利用HTML5实现Canvas粒子文字特效 代码结构 1. HTML代码 change /*jshint esversion:6*/ var ...
- html5如何写出圆背景,利用HTML5实现Canvas虚幻圆点背景特效
特效描述:利用HTML5实现 Canvas 虚幻圆点 背景特效.利用HTML5实现Canvas虚幻圆点背景特效 代码结构 1. 引入JS 2. HTML代码 (function($){ var can ...
- html5 可旋转的三维树形结构,利用HTML5实现勾股树植物生长动画特效
特效描述:利用HTML5实现 勾股树 植物生长 动画特效.利用HTML5实现勾股树植物生长动画特效 代码结构 1. HTML代码 const canvas = document.querySelect ...
- html5 手机随机抽奖,利用HTML5的devicemotion事件实现手机摇一摇抽奖,年会抽奖
1 2 3 4 5 6 摇一摇抽奖 7 8 html,body{width:100%;height:100%;background-color:#000;margin:0;overflow:hidde ...
- html5经纬度定位 源码_利用HTML5定位功能获取经纬度,在根据经纬度利用百度地图获取位置信息...
一.引入相关js 二.js代码 // 单次位置请求执行的函数 function getLocation(){ navigator.geolocation.getCurrentPosition(mapI ...
- html5简单制作效果,分享一个利用HTML5制作的海浪效果代码-H5教程
在前面简单讲述了一下HTML里的Canvas,这次根据Canvas完成了"海浪效果"(水波上升). (O(∩_∩)O哈哈哈~作者我能看这个动画看一下午) 上升水波.gif动画分析 ...
最新文章
- Android SharedPreferences 详解 源码解析
- AWS — AWS 上的 5G 网络
- 加快windows上对大文件,以及很多很多小文件进行不同磁盘拷贝的速度——windows上的最快拷贝软件FastCopy
- 养猪砸下50亿美金-丰收节贸易会:俄罗斯最大农业巨头青岛
- ubuntu server 10.04 NFS 添加共享目录
- 使用CGContext画线操作小记
- Android企业级程序完全退出的解决方案
- MVC教程第一篇:准备工作
- 牛客练习赛 栈和排序
- IE9 表格错位bug
- Visual Studio Code配置Salesforce Apex开发环境
- 剑网三 服务器维护时间,剑网3白帝风云什么时候开放
- 小新pro13睡眠后无法唤醒_小新air12、air13、air13pro睡眠后无法唤醒的调试方法
- 9*9的数独(dfs)
- 软件测试新手入门该学什么?最全整理,照着学就对了
- Objective-C基础教程读书笔记(3)
- java多音字首字母排序
- 我手中的电子书书目清单(开始提供BT下载)
- Nginx代理POP协议之安装和配置
- bzoj2616 SPOJ PERIODNI 笛卡尔树+DP
热门文章
- 高等代数 多项式环(第7章)1 一元多项式环,整除关系,带余除法
- AP6256完美代替AP6255
- centos+nginx+wordpress建站
- 直播有哪些技巧?分享7个常见技巧
- [Error]EOL while scanning string literal
- mw325r虚拟服务器,mw325r美科星怎么桥接
- 剑指offer:滑动窗口的最大值(Python)
- 服务器连接存储后系统启动不了,IBM服务器直连存储系统不启动的 经验分享
- IBM DS存储多路径
- 服务端渲染详解(SSR)