`
jimolangyaleng
  • 浏览: 5599 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

js 手机摇一摇

    博客分类:
  • JS
阅读更多

上次在玩一手游看到里面有一个摇一摇抽奖,游戏是web做的所以在网上找了些代码实现了JS摇一摇功能,

具体内容不详解,直接上码

HTML代码

<audio id="musicBox" src=""></audio>  

 JS代码

init();
		var SHAKE_THRESHOLD = 3000;
		var last_update = 0;
		var x = y = z = last_x = last_y = last_z = 0;

		function init() {
		    if (window.DeviceMotionEvent) {
		        window.addEventListener('devicemotion', deviceMotionHandler, false);
		    } else {
		        alert('not support mobile event');
		    }
		}

		function deviceMotionHandler(eventData) {
		    var acceleration = eventData.accelerationIncludingGravity;
		    var curTime = new Date().getTime();
		    if ((curTime - last_update) > 100) {
		        var diffTime = curTime - last_update;
		        last_update = curTime;
		        x = acceleration.x;
		        y = acceleration.y;
		        z = acceleration.z;
		        var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;

		        if (speed > SHAKE_THRESHOLD) {
		            alert("感觉到摇动,我要发射了");
		            var media = document.getElementById("musicBox"); //获取音频控件
		            media.setAttribute("src", "imgy/shake_sound.mp3");
		            media.load(); //加载音频
		            media.play(); //播放音频 
		        }
		        last_x = x;
		        last_y = y;
		        last_z = z;
		    }
		}

 

分享到:
评论

相关推荐

    javascript手机摇一摇

    JavaScript 手机摇一摇功能是移动应用中常见的一种互动元素,常用于游戏、抽奖活动或者音乐播放等场景。在JavaScript中实现手机摇一摇功能,主要依赖于HTML5的Device Motion API,这个API可以获取到设备的运动数据,...

    jsp html js 手机摇一摇

    jsp html js 手机摇一摇 完全使用js进行计算 可以修改SHAKE_THRESHOLD = 999 来控制灵敏度 非常简单的代码

    js手机摇一摇统计次数代码.zip

    这个"js手机摇一摇统计次数代码"是一个很好的学习资源,它让我们了解如何利用JavaScript和HTML5的DeviceMotionEvent来实现手机端的交互功能。通过分析和实践这个代码,开发者可以更好地掌握移动端的运动检测和实时...

    h5 + js 仿微信摇一摇

    2. **JavaScript事件处理**:JS是实现摇一摇功能的主体,通过监听DeviceOrientation事件,当设备的运动参数达到一定阈值时,触发摇一摇的行为。 3. **加速度计和陀螺仪**:理解这两个硬件传感器的工作原理是关键,...

    js手机摇一摇统计次数特效代码

    在JavaScript的世界里,实现"手机摇一摇统计次数特效代码"是一种常见的互动功能,尤其适用于移动设备的应用或游戏中。这个功能让用户体验到类似现实世界中的摇晃动作,并将其转化为数字计数,为用户带来新颖的交互...

    js手机摇一摇统计次数代码

    在JavaScript(JS)中实现手机端的“摇一摇”...综上所述,“js手机摇一摇统计次数代码”涉及了移动设备的硬件特性、JavaScript事件监听以及用户交互设计等多个方面,对于增强网页应用的互动性和趣味性有着重要作用。

    摇一摇js代码

    摇一摇js代码,可在手机端实现摇一摇获得奖品的效果。

    手机摇一摇活动JS+HTML

    "手机摇一摇活动JS+HTML"是一种基于Web技术实现的互动功能,通常用于移动设备上的线上活动或游戏。这个项目可能包含JavaScript代码和HTML页面结构,以模拟真实世界中的摇晃动作,如用户在手机上摇动设备,然后在屏幕...

    原生js仿微信摇一摇功能 源码 亲测有效可用 可直接套用

    以上就是使用原生JavaScript实现微信摇一摇功能的核心要点。通过理解设备运动事件和摇动检测逻辑,我们可以创建一个与微信摇一摇类似的功能,并根据需要进行定制和优化。在实际项目中,记得结合提供的源码进行学习和...

    手机摇一摇震动刷新

    在Android开发中,“手机摇一摇震动刷新”是一种常见的用户交互功能,允许用户通过晃动手机来触发某个操作,如刷新界面。这个功能通常应用于新闻应用、社交应用或者任何需要实时更新内容的场景。下面我们将深入探讨...

    手机微信摇一摇统计次数js代码

    本文将深入探讨如何使用JavaScript(JS)实现手机端的“摇一摇”次数统计功能。 首先,我们需要理解JavaScript在网页开发中的角色。JavaScript是一种轻量级的解释型编程语言,主要用于增强网页的交互性和动态效果。...

    jQuery手机摇一摇抽油卡代码.zip

    jQuery手机摇一摇抽油卡代码是一款汽车网站常用的油卡抽奖活动代码。

    微信摇一摇JAVASCRIPT算法

    微信或H5页面,JS获取摇一摇事件,响应用户这一事件并进行回馈或处理。代码+摇一摇素材,GIF动画。下载后直接可以使用,完整地样例源码,分享给大家

    shake.js移动端摇一摇功能检测插件

    当用户摇动手机时,设备的加速度数据会发生显著变化,"shake.js"就是通过分析这些数据来判断用户是否进行了摇一摇操作。 在"shake.js-master"压缩包中,主要包含以下内容: 1. **shake.js**:这是核心的JavaScript...

    微信小程序demo:摇一摇:亲测真机可用摇一摇功能89.zip

    摇一摇功能是微信小程序中的一种交互方式,用户通过手机快速晃动来触发特定的程序逻辑。这种功能常见于各种娱乐和互动场景,如抽奖、游戏等,增加了用户的参与度和趣味性。在微信小程序中实现摇一摇功能,主要涉及...

    jQuery手机摇一摇抽油卡抽奖活动代码

    2. **手机摇一摇事件模拟**:在移动设备上,原生的JavaScript API并不直接支持摇动事件。因此,开发者需要通过监听设备的运动传感器数据(如加速度计)来模拟摇一摇行为。jQuery插件可能被用来封装这个过程,使事件...

    微信摇一摇

    要开发这样一个"微信摇一摇"的功能,通常涉及到的技术栈包括Java、HTML5(H5)和JavaScript(JS)。 首先,从技术角度来看,"微信摇一摇"的后端开发主要使用Java。Java是一种广泛应用于服务器端开发的强大编程语言...

    手机wrap网站wap仿微信手机摇一摇抽奖活动页面模板

    ### 手机WAP网站仿微信手机摇一摇抽奖活动页面模板 在移动互联网时代,随着智能手机的普及和网络技术的发展,WAP(Wireless Application Protocol,无线应用协议)网站逐渐成为了连接移动用户与互联网的重要桥梁之...

    摇一摇抽奖页面后台数据库设计

    综上所述,摇一摇抽奖页面后台数据库设计涉及前端JSP和JS的交互设计,后端Controller的逻辑处理,以及数据库中的多个表设计,确保了抽奖活动的完整性和用户体验。这样的系统设计既满足了实时抽奖的需求,又能有效地...

    HTML5带音乐手机摇一摇抽奖代码.zip

    在本案例中,“HTML5带音乐手机摇一摇抽奖代码”是一个利用HTML5特性构建的互动抽奖应用,尤其适用于移动端。这个应用通过模拟“摇一摇”动作来触发抽奖事件,并配合背景音乐,为用户带来更为生动有趣的体验。 首先...

Global site tag (gtag.js) - Google Analytics