HTML5手机摇一摇抽奖代码
手机网页的重力摇一摇抽奖,玩法够新颖,交互感也挺强。用的是 HTML5 的Device Orientation API,能读手机的加速度和方向变化。简单说,就是你摇一下手机,页面就能响应,触发抽奖流程。
监听方式也直白,直接用window.addEventListener('deviceorientation')
就行了。读取event.accelerationIncludingGravity
里的x
、y
、z
值来判断是不是在“摇”。
判断逻辑你可以设个阈值,比如连续帧里加速度变化量大于一定值就算摇到了,再调用抽奖函数,像startDraw()
这种就可以弹窗、动画、接口求之类的事。
用起来比较适合微信内嵌页、活动页、H5 小游戏那种,配合点音效和反馈,用户参与感挺高的。就是要注意下兼容性,有些浏览器或者低端安卓不一定支持,记得加下检测。
你要是想深入了解,还可以看看下面这几个参考,基本都是围绕这个思路扩展的,像颜色切换、音乐、甚至仿微信摇一摇那种。
下载地址
用户评论