<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>phonegap_device_network_notification01</title>

<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>

<script src="../jquery.js" type="text/javascript"></script>

<script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>

<script src="../cordova.js" type="text/javascript"></script>

<style type="text/css">

    #ball {

    position: absolute;

    z-index: 0;

    left: 20px;

    top: 100px;

    background: #f00;

}

</style>

<script type="text/javascript" charset="utf-8">

    var watchID = null;

    document.addEventListener("deviceready", onDeviceReady, false);

    function drawCircle(x,y) {

        var ctx = document.getElementById("ball").getContext('2d');

        var rd = 10;

        ctx.beginPath();

        ctx.arc(x, y, rd, 0, Math.PI * 2, false);

        ctx.closePath();

        ctx.fillStyle = "yellow";

        ctx.fill();

    }

    function clear() {

        var ctx = document.getElementById("ball").getContext('2d');

        ctx.clearRect(0,0,200,200);

    }

    function onDeviceReady() {

        drawCircle(10,10);

        startWatch();

    }

    function startWatch() {

        var options = { frequency: 40 };

        watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);

    }

    function stopWatch() {

        if (watchID) {

            navigator.accelerometer.clearWatch(watchID);

            watchID = null;

        }

    }

    var oldX = 10, oldY = 10;

    // 获取加速度信息成功后的回调函数

    function onSuccess(newValue) {

        if(10<=oldX<180&&10<=oldY<180){

            clear();

            drawCircle(oldX,oldY);

        }

        oldX -= newValue.x;

        oldY += newValue.y;

        var element = document.getElementById('accelerometer');

        element.innerHTML = 'X: ' + oldX + '<br />' +

                            'Y: ' + oldY + '<br />';

    }

    // 获取加速度信息失败后的回调函数

    function onError() {

        alert('onError!');

    }

</script>

</head>

<body>

<div data-role="page">

        <div data-role="header">

            <h1>PhoneGap100实战</h1>

        </div>

        <div data-role="content">

            <div id="accelerometer">开启重力感应...</div>

            <button onclick="stopWatch();">停止重力感应</button>

            <canvas id="ball" width="200" height="200"></canvas>

        </div>

        <div data-role="footer">

            <h4>&nbsp;</h4>

        </div>

</div>

</body>

</html>

PhoneGap实现重力感应的更多相关文章

  1. cocos2dx 3.x(让精灵随着重力感应的方向移动而移动)

    // // GameScene.hpp // HelloWord // // Created by apple on 2017/1/7. // // #ifndef GameScene_hpp #de ...

  2. H5案例分享：html5重力感应事件

    html5重力感应事件 一.手机重力感应图形分析 1.设备围绕z轴的旋转角度为α,α角度的取值范围在[0,360). 设备在初始位置,与地球(XYZ)和身体(XYZ)某个位置对齐. 设备围绕z轴的旋转 ...

  3. 【Android开发学习笔记】【第九课】重力感应

    概念 使用重力感应技术的Android游戏已经屡见不鲜,不知道自己以后会不会用到,所以先研究了一下. 在网上学习了一下,貌似没有api,所以得自己去分析手机处在怎样状态下.注意: 下面提供的demo程 ...

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

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

  5. iOS 重力感应 学习1 陀螺仪 水平仪 指南针

    小球可以随着重力感应 四处乱撞. 放大了坐标位移 就可以看见小球动了. 然后规定小球的路径 当滑到中间时候 弹出一张图片 作为提示. 我做了一个小demo 效果不错哦 CMMotionManager ...

  6. 移动终端学习2：触屏原生js事件及重力感应

    如今智能移动设备已经渗透到人们生活的方方面面,用户数量也在不断迅速增长(市场研究机构 eMarketer 在今年初发表的趋势报告中预测,2014年至2018年,中国智能手机用户从总人口的 38.3%增 ...

  7. Android重力感应开发

    http://blog.csdn.net/mad1989/article/details/20848181 一.手机中常用的传感器 在Android2.3 gingerbread系统中,google提 ...

  8. 基于野火M3开发板（STM32F103VET6）的迷宫小球（重力感应控制）游戏开发

    2013-03-03 这是研一上学期<实时嵌入式系统实验>课程的大作业,是利用野火板的资源,加上一个AHRS(Attitude and Heading Reference System,姿 ...

  9. iOS设备的重力感应

    重力感应是每台iOS设备都具备的功能,所以在应用用好重力感应会有意想不到的效果 1.添加CoreMotion框架 2.在需要使用重力感应的类中添加头文件 #import <CoreMotion/ ...

随机推荐

  1. 带有Apache Spark的Lambda架构

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 目标 市场上的许多玩家已经建立了成功的MapReduce工作流程来每天处理以TB计的历史数据.但是谁愿意等待24小时才能获得最新的分析结果? ...

  2. Firebird Fluentdata

    Fluentdata 支持很多种数据库驱动,但对Firebird不友好,不过可以使用DB2Provider来操作大部分功能, 例如: new DbContext().ConnectionString( ...

  3. 什么是web service （转）

    一.序言 大家或多或少都听过WebService(Web服务),有一段时间很多计算机期刊.书籍和网站都大肆的提及和宣传WebService技术,其中不乏很多吹嘘和做广告的成分.但是不得不承认的是Web ...

  4. vue 使用Slot 分发内容 学习总结。

    https://cn.vuejs.org/v2/guide/components.html#使用-Slot-分发内容    官方API地址 我对solt的理解是当组件中某一项需要单独定义,那么就应该使 ...

  5. HTML5坦克大战（韩顺平版本）

    HTML5坦克大战(韩顺平版本) 2017-3-22 22:46:22 by SemiconductorKING 去年暑假学习了一下HTML5实现简单的坦克大战,觉得对JavaScript初学者来说, ...

  6. golang获取变量数据类型

    如果某个函数的入参是interface{},有下面几种方式可以获取入参的方法: 1 fmt: import "fmt" func main() { v := "hello ...

  7. System.arraycopy的测试

    ArrayList的源码中数组的拷贝用到该方法: public static void arraycopy(Object src, --源数组 int srcPos, --源数组要复制的起始位置 Ob ...

  8. 重构指南 - 分解复杂判断（Remove Arrowhead Antipattern）

    当代码中有多层嵌套时,会降低代码的可读性,对于以后的修改也增加难度,所以我们需要分解复杂的判断并尽快返回. 重构前代码 public class Security { public ISecurity ...

  9. Redis（MySQL和redis怎么分工合作的？）

    新手: redis也是服务器,主要部署在服务器上缓解服务器的压力,对于访问量交大的数据可以先缓存到redis,用户访问时直接访问redis,不用再直接访问数据库,缓解数据库的压力.mysql主要存储数 ...

  10. Python入门-类的成员

    昨天我们简单的认识了一下面向对象,以及和面向过程之间的区别,从而我们知道了类这个东西,今天我们就来详细的了解一下关于类的一些东西. 一.类的成员 首先, 什么是类的成员,很简单, 你能在类中写什么? ...