未能在 phonegap 中使用带有 HTML 和 JavaScript 的加速度计

Failure to use accelerometer with HTML and JavaScript in the phonegap

本文关键字:HTML JavaScript 加速度计 phonegap      更新时间:2023-09-26

我想知道为什么我正在做的应用程序会出错?当我摇手机时,他没有开始玩。http://software.intel.com/pt-br/articles/create-handbell-using-html5-and-phonegap,我按照这个网站上的说明进行操作,但我不太明白它是如何工作的。这是代码:

<!DOCTYPE HTML>
 <html>
 <head>
 <meta name="viewport" content="width=320; user-scalable=no" />
 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
 <title>BellShapes</title>
  <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
  <script type="text/javascript" charset="utf-8">
   function onLoad(){
    // Aguardar o carregamento do Cordova
    document.addEventListener("deviceready", onDeviceReady, false);
    // inicialização
    bellrightring = document.getElementById("bellrightring");
    bellleftring = document.getElementById("bellleftring");
    bellleft = document.getElementById("bellleft");
    bellright = document.getElementById("bellright");
    bellcenter = document.getElementById("bellcenter");
    // inicialização da mídia
    bellsound = new Media("/android_asset/www/resources/bell.mp3",
    onRingSuccess(bellsound), onRingError);
    bellend = new Media("/android_asset/www/resources/bell-end.mp3",
    onRingSuccess(bellend), onRingError);
    }
    function sign(val, delta) {
        if (typeof delta == undefined) delta=0
        if (val > 0 && Math.abs(val)-delta > 0) return 1;
        else if (val<0 && Math.abs(val)-delta > 0) return -1;
        else return 0;
    }
    function isShaking(last, current, threshold) {
    var deltaX = Math.abs(last.x - current.x),
        deltaY = Math.abs(last.y - current.y),
        deltaZ = Math.abs(last.z - current.z);
            return ((deltaX > threshold && deltaY > threshold) ||
                (deltaX > threshold && deltaZ > threshold) ||
                (deltaY > threshold && deltaZ > threshold) || deltaX > threshold);   
    }
    accelID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
    function onSuccess(acceleration) {
        var x = acceleration.x;
        var y = acceleration.y;
        var z = acceleration.z;
        var t = false;
        if (previous){
        if (isShaking(previous, acceleration, 10)){     
        moveBell(sign(x)); 
        bellsound.play();
        accelerated = true;
        }
        else {
            stopBell(acceleration);
            if (accelerated == true){
            bellend.play();
        }
        accelerated = false;
    }
}
    previous = acceleration;
}

 </script>  
</head>
<body id="onLoad">
<div id="handbell">
    <div id="bellcenter" class="position"></div>
    <div id="bellright" class="position"></div>
    <div id="bellleft" class="position"></div>
    <div id="bellrightring" class="ring"></div>
    <div id="bellleftring" class="ring"></div>
</div>

我对javascript了解不多,所以如果你能用更简单的方式解释,我将不胜感激。

我更新了代码,如果您看到错误,请告诉我!非常感谢!

<!DOCTYPE HTML>
<html>
 <head>
 <meta name="viewport" content="width=320; user-scalable=no" />
 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
 <title>BellShapes</title>
  <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
  <script type="text/javascript" charset="utf-8">
   function onLoad(){
    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
    accelID = navigator.accelerometer.watchAcceleration(onSuccess, onError);
    bellrightring = document.getElementById("bellrightring");
    bellleftring = document.getElementById("bellleftring");
    bellleft = document.getElementById("bellleft");
    bellright = document.getElementById("bellright");
    bellcenter = document.getElementById("bellcenter");
    bellsound = new Media("/android_asset/www/resources/bell.mp3",
    onRingSuccess(bellsound, onRingError);
    bellend = new Media("/android_asset/www/resources/bell-end.mp3",
    onRingSuccess(bellend, onRingError);
    }
    function sign(val, delta) {
        if (typeof delta == undefined) delta=0
        if (val > 0 && Math.abs(val)-delta > 0) return 1;
        else if (val<0 && Math.abs(val)-delta > 0) return -1;
        else return 0;
    }
    function isShaking(last, current, threshold) {
    var deltaX = Math.abs(last.x - current.x),
        deltaY = Math.abs(last.y - current.y),
        deltaZ = Math.abs(last.z - current.z);
            return ((deltaX > threshold && deltaY > threshold) ||
                (deltaX > threshold && deltaZ > threshold) ||
                (deltaY > threshold && deltaZ > threshold) || deltaX > threshold);   
    }
    accelID = navigator.accelerometer.watchAcceleration(onSuccess, onError);
    function onSuccess(acceleration) {
        var x = acceleration.x;
        var y = acceleration.y;
        var z = acceleration.z;
        var t = false;
        if (previous){
        if (isShaking(previous, acceleration, 10)){     
            moveBell(sign(x)); 
            bellsound.play();
            accelerated = true;
            }
        else {
            stopBell(acceleration);
            if (accelerated == true){
            bellend.play();
            }
        accelerated = false;
        }
    }
    previous = acceleration;
}

 </script>  
 </head>
 <body id="onLoad">
 <div id="handbell">
    <div id="bellcenter" class="position"></div>
    <div id="bellright" class="position"></div>
    <div id="bellleft" class="position"></div>
    <div id="bellrightring" class="ring"></div>
    <div id="bellleftring" class="ring"></div>
</div>
 </body>
</html>

好吧,首先,您告诉代码在 deviceready 事件触发时运行 onDeviceReady 函数,但我没有在任何地方看到该事件定义。对 PhoneGap 功能(如加速计)的任何使用都必须在设备就绪事件触发完成。