logo图片
phoneGap教程

photoGap 移动对象

使用加速度计移动对象

在上一节中,我们使用 PhoneGap 读取设备加速度计。在本节中,我们将研究加速计环并用它来做一些有建设性的事情,比如在屏幕上移动一个物体。我们将对之前的示例进行一些更改。这些是用于使用加速度计移动对象的以下步骤:

1) 创建 index2.html

我们将创建一个新文件 index2.html。 html 与 index.html 中预设的代码相同。我们稍后将在 index2.html 文件中进行更改,而不是在 index.html 中。
使用加速计移动对象

2) 创建一个红色块用于移动

现在,我们将使用
标签创建一个移动块。我们将使用 id 属性 给它一个 Id,因为 JavaScript 不知道 HTML 标签。
<div id="blockRed"></div>

3) 更改红块的样式

我们将使用 <style></style> 标签。我们将通过以下方式设置背景颜色、宽度和高度:
<style>
        #blockRed
        {
                background-color: #aa0000;
                width: 50px;
                height: 50px;
         }
</style>

4) 在 window.onload 函数中进行更改

我们将在 success 函数中进行更改。如果 X 加速度小于 0,我们将取 x 位置变量,该变量标记 X 轴上红色方块的 X 位置,并将加速度 X 值的绝对值加到该位置。
if(accel.x < 0)
{
                    xPos = xPos + (Math.abs(accel.x));
                    document.getElementById('blockRed').style.marginLeft = xPos + "px";
}
否则,我们将通过以下方式乘以负 1 使 xPos 为负数:
else
{
           xPos = xPos + (accel.x *-1);
           document.getElementById('blockRed').style.marginLeft = xPos + "px";
} 

完整代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title>Accelerometer</title>
        <style>
        #blockRed
            {
                background-color: #aa0000;
                width: 50px;
                height: 50px;
            }
        </style>
        <script>
            var xPos=0;
            window.onload = function()
            {
                var watchID = navigator.accelerometer.watchAcceleration(success, fail, {frequency: 100});
                
            }
            
            function success(accel)
            {   
                
                if(accel.x < 0){
                    xPos = xPos + (Math.abs(accel.x));
                    document.getElementById('blockRed').style.marginLeft = xPos + "px";
                } else
                {
                    xPos = xPos + (accel.x *-1);
                    document.getElementById('blockRed').style.marginLeft = xPos + "px";
                }
                
                document.getElementById('outX').innerHTML = "X:" + accel.x;
                document.getElementById('outY').innerHTML = "<br/>Y:" + accel.y;
                document.getElementById('outZ').innerHTML = "<br/>Z:" + accel.z;
            }
            
            function fail(e)
            {
                alert("Accelerometer Error");
            }
        </script>
    </head>
    <body>
        <div id="blockRed"></div>
        <output id="outX"></output>
        <output id="outY"></output>
        <output id="outZ"></output>
        
        <script type="text/javascript" src="cordova.js"></script>
        
    </body>
</html> 
输出
Moving带有加速度计的物体
昵称: 邮箱:
Copyright © 2020 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4