在JS和Cordova中使用加速度计移动一个物体(这种情况下是一个球)

时间:2014-03-06 10:08:47

标签: javascript html5 object cordova accelerometer

我正在尝试使用加速计移动球。但我坚持让球移动。

我得到了加速度计的值,但是我如何将它们与球结合起来才能移动呢?

    等待加速度计...

<div id="heading">Waiting for heading...</div>

<div id="ball"></div>

<script src="cordova.js"></script>
<script src="static/js/app.js"></script>

    #ball {
    display: block;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    background-color: rgb(0,0,0);
    color: rgb(0,0,0);
}


//self-invoking anonymous function

(function(){     'use strict';

// The watch id references the current `watchAcceleration` & 'watchHeading'
var watchID = null;

// Initialize app with an controller object literal
var app = {
    // init method, Cordova is ready to be used
    init: function () {
        accelerometer.begin();
        compas.begin();
    },  
}

var accelerometer = {
    begin: function () {
        // Update acceleration every 100 of a second
        var options = { 
            frequency: 100 
        };

        watchID = navigator.accelerometer.watchAcceleration(this.success, debug.fail, options);
    },
    // Stop watching the acceleration
    stop: function () {
        if (watchID) {
            navigator.accelerometer.clearWatch(watchID);
            watchID = null;
        }
    },
    // onSuccess: Get a snapshot of the current acceleration
    success: function (acceleration) {
        var element = document.getElementById('accelerometer');
        element.innerHTML = 'Acceleration X: ' + acceleration.x + '<br />' +
                            'Acceleration Y: ' + acceleration.y + '<br />' +
                            'Acceleration Z: ' + acceleration.z + '<br />' +
                            'Timestamp: '      + acceleration.timestamp + '<br />';
    }
}

var ball = {
    object: function () {
        var element = document.getElementById('ball');
    },

    update: function () {
        game.clear();
        newDX = accelerometer.begin.acceleration.x();
        newDY = accelerometer.begin.acceleration.y();
        newDX *= -5;
        newDY *= -5;
        object.setDX(newDX);
        object.setDY(newDY);

        ball.update();
    }
}

var compas = {
    begin: function () {
        // Update acceleration every 100 of a second
        var options = { 
            frequency: 100 
        };

        watchID = navigator.compass.watchHeading(this.succes, debug.errormsg, options);
    },
    // Stop watching the heading
    stop: function () {
        if (watchID) {
            navigator.compass.clearWatch(watchID);
            watchID = null;
        }    
    },
    // onSuccess: Get a snapshot of the current heading
    success: function (heading) {
        var element = document.getElementById('heading');
        element.innerHTML = 'Heading: ' + heading.magneticHeading;
    }
}

var debug = {
    fail: function () {
        alert('onError!');
    },
    errormsg: function (compassError) {
         alert('Compass error: ' + compassError.code);
    }

}

document.addEventListener("deviceready", app.init, false);

})();

1 个答案:

答案 0 :(得分:0)

试用this教程。这很简单。

(注意:将phonegap.js更改为cordova.js)