mirror of
https://github.com/apache/cordova-android.git
synced 2025-02-01 02:12:58 +08:00
233 lines
3.9 KiB
HTML
Executable File
233 lines
3.9 KiB
HTML
Executable File
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=320; user-scalable=no" />
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
<title>PhoneGap</title>
|
|
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8">
|
|
<style>
|
|
|
|
#playField
|
|
{
|
|
width: 295px;
|
|
height:295px;
|
|
background:rgba(64,64,64,0.5);
|
|
border: 1px solid rgba(128,128,128,0.5);
|
|
-webkit-border-radius: 5px;
|
|
border-radius: 5px;
|
|
clear:both;
|
|
margin:15px 6px 0;
|
|
padding:4px 0px 2px 10px;
|
|
}
|
|
|
|
#ball
|
|
{
|
|
-webkit-border-radius: 26px;
|
|
width: 52px;
|
|
height: 52px;
|
|
background:rgba(128,128,128,0.5);
|
|
border: 1px solid rgba(32,32,32,0.5);
|
|
position:absolute;
|
|
}
|
|
|
|
.btn
|
|
{
|
|
text-decoration: none;
|
|
padding: 8px 24px;
|
|
background:#fff;
|
|
color: #aaa;
|
|
font-weight: bold;
|
|
-webkit-border-radius: 10px;
|
|
}
|
|
|
|
.btn:hover
|
|
{
|
|
background: #6fd9f4;
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
|
|
<script type="text/javascript" charset="utf-8">
|
|
|
|
|
|
function preventBehavior(e) { e.preventDefault(); };
|
|
|
|
var ballSize = 52;
|
|
|
|
var fieldSize = 295;
|
|
|
|
var top = 150;
|
|
var bottom = 445;
|
|
|
|
var x = fieldSize / 2;
|
|
var y = fieldSize / 2;
|
|
|
|
var accelInputX = 0.01;
|
|
var accelInputY = 0.01;
|
|
|
|
var vx = 0;
|
|
var vy = 0;
|
|
|
|
var vLimit = 200;
|
|
|
|
var xMin = 6;
|
|
var xMax = xMin + fieldSize - ballSize;
|
|
|
|
var yMin = 32;
|
|
var yMax = yMin + fieldSize - ballSize;
|
|
|
|
var multiplier = 1.5;
|
|
|
|
var ball;
|
|
|
|
var timer = null;
|
|
|
|
var frameTimer = null;
|
|
|
|
var lastFrameTime = 0;
|
|
|
|
|
|
|
|
|
|
function watchAccel()
|
|
{
|
|
if(timer == null)
|
|
{
|
|
timer = navigator.accelerometer.watchAcceleration(onAccellUpdate,onAccelError,{frequency:50});
|
|
}
|
|
}
|
|
|
|
function onAccelError(e)
|
|
{
|
|
alert("fail: " + e );
|
|
}
|
|
|
|
function onAccellUpdate(accel)
|
|
{
|
|
accelInputX = accel.x;
|
|
accelInputY = accel.y;
|
|
}
|
|
|
|
function onFrameUpdate()
|
|
{
|
|
vx += accelInputX;
|
|
vy -= accelInputY;
|
|
|
|
if (vx > vLimit)
|
|
vx = vLimit;
|
|
|
|
if (vy > vLimit)
|
|
vy = vLimit;
|
|
|
|
//var now = new Date().getTime();
|
|
//var elapsed = now - lastFrameTime;
|
|
//lastFrameTime = now;
|
|
|
|
x += vx;
|
|
y += vy;
|
|
|
|
if (y > yMax)
|
|
{
|
|
y = yMax;
|
|
vy = -vy / 2;
|
|
}
|
|
else if (y < yMin)
|
|
{
|
|
y = yMin;
|
|
vy = -vy / 2;
|
|
}
|
|
|
|
if (x > xMax)
|
|
{
|
|
x = xMax;
|
|
vx = -vx / 2;
|
|
}
|
|
else if (x < xMin)
|
|
{
|
|
x = xMin;
|
|
vx = -vx / 2;
|
|
}
|
|
|
|
updateBallCordinates();
|
|
|
|
}
|
|
|
|
function updateBallCordinates()
|
|
{
|
|
ball.style.left = ( xMin + x ).toString() + 'px';
|
|
ball.style.top = ( yMin + y ).toString() + 'px';
|
|
}
|
|
|
|
function onWinLoad()
|
|
{
|
|
document.addEventListener("touchmove", preventBehavior, false);
|
|
document.addEventListener("deviceready",onDeviceReady,false);
|
|
}
|
|
|
|
function onStartButton()
|
|
{
|
|
if(frameTimer != null)
|
|
{
|
|
navigator.accelerometer.clearWatch(timer);
|
|
timer = null;
|
|
|
|
clearInterval(frameTimer);
|
|
frameTimer = null;
|
|
}
|
|
else
|
|
{
|
|
watchAccel();
|
|
frameTimer = setInterval(onFrameUpdate,20);
|
|
//lastFrameTime = new Date().getTime();
|
|
}
|
|
|
|
document.getElementById("btnText").innerHTML = ( frameTimer != null ) ? "Pause" : "Start";
|
|
}
|
|
|
|
function onDeviceReady()
|
|
{
|
|
ball = document.getElementById("ball");
|
|
updateBallCordinates();
|
|
updateBallCordinates(); // hack for the shadow
|
|
ball.style.display = "block";
|
|
|
|
document.getElementById("startBtn").addEventListener("touchstart",onStartButton,false);
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
</head>
|
|
|
|
<body id="stage" class="theme" onload="onWinLoad()">
|
|
|
|
<div class="topBar">
|
|
<a href="index.html">
|
|
<span class="back_button">Back</span>
|
|
</a>
|
|
<span class="pageTitle">Accelerometer</span>
|
|
</div>
|
|
|
|
|
|
<div id="playField" style="width:295px">
|
|
<div id="ball" style="display:none"></div>
|
|
</div>
|
|
|
|
<a href="#" id="startBtn">
|
|
<div class="item">
|
|
<h2 id="btnText">Start</h2>
|
|
</div></a>
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|
|
|
|
|
|
|