<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Sample</title>
<script src="cordova-2.7.0.js" type="text/javascript"></script>
<script type="text/javascript">
if (!navigator.userAgent.toLowerCase().match('chrome')) {
document.write("<script src='phonegap.js'><\/script>");
}
</script>
</head>
<body onload="onLoaded()" style="background-image:url(garden_bg.jpg)">
<img id="fighter" src="butterfly.png" width="50" height="50" style="position:absolute;display:block;z-index:99999" />
<script>
var fighter; // 用來引用圖片
var speedX = 0; // X軸速度
var speedY = 0; // Y軸速度
var speedMax = 10; // 最大速度，如果不限制則一直加大就很難停下來
var maxPosX; // X軸的範圍，圖片不能超出這個範圍
var maxPosY; // Y軸的範圍，圖片不能超出這個範圍
// 當DOM載入完畢
function onLoaded() {
// 獲取對圖片的引用
fighter = document.getElementById("fighter");
// 獲取可視區域最大值
maxPosX = document.documentElement.clientWidth - Number(window.getComputedStyle(fighter, null).width.replace("px",""));
maxPosY = document.documentElement.clientHeight - Number(window.getComputedStyle(fighter, null).height.replace("px",""));
// 註冊deviceready事件監聽，指定deviceready事件處理函數
document.addEventListener("deviceready", onDeviceReady, false);
}
// PhoneGap完成載入後開始監控加速度偏移量
function onDeviceReady() {
var options = { frequency: 100 }; // 每隔0.5秒就獲取一次加速度
// 調用Accelerometer.watchAcceleration()方法來持續獲取加速度偏移量
navigator.accelerometer.watchAcceleration(onGetAccelSuccess,
onGetAccelError,
options);
}
// 成功獲取加速度偏移量後的回調函數，用來改變飛行器位置
function onGetAccelSuccess(acceleration) {
// 建立速度向量
speedX -= acceleration.x;
speedY += acceleration.y;
// 限制速度，如果不限制則一直加大就很難停下來
if (speedX > speedMax)
{
speedX = speedMax;
}
else if (speedX < -speedMax)
{
speedX = - speedMax;
}
if (speedY > speedMax)
{
speedY = speedMax;
}
else if (speedY < -speedMax)
{
speedY = - speedMax;
}
// 獲得圖片當前位置
var posX = Number(fighter.style.left.replace("px",""));
var posY = Number(fighter.style.top.replace("px",""));
// 運算獲得圖片新位置
var newPosX = speedX + posX;
var newPosY = speedY + posY;
// 根據檢測來判斷圖片位置是否超出可視範圍
// 如果超出可視範圍，則讓它就停在邊緣
// 並且初始化速度向量為0，以利於反向操作
if (posX < 0)
{
fighter.style.left = "0px";
speedX = 0;
}
else if (newPosX > maxPosX)
{
fighter.style.left = maxPosX + "px";
speedX = 0;
}
else
{
fighter.style.left = newPosX + "px";
}
if (posY < 0)
{
fighter.style.top = "0px";
speedY = 0;
}
else if (newPosY > maxPosY)
{
fighter.style.top = maxPosY + "px";
speedY = 0;
}
else
{
fighter.style.top = newPosY + "px";
}
}
// 不能獲取加速度偏移量後的回調函數
function onGetAccelError() {
alert('不能獲取重力加速度，請檢查！');
}
</script>
</body>
</html>
留言列表
