Hi,
I am converting for HTML5, with C2, a game I did with Corona for IOS/Android. But I used the acelerometer to control the character. I found two samples of HTML pages with scripts which use the acelerometer, but how I am a beginner with HTML code, I ask if somebody can see it and forward me how could I use the returned x and y variables in C2.
Blog Topic
Link 1
P.S: You can see the code behind the pages with ctrl+U in Chrome, even if it can not work in your device. Anyway I am attaching the second code, the simplest one, below.
<!DOCTYPE html>
<html>
<head>
<title>Mobile Safari HTML5 Accelerometer Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,user-scalable=no" />
<style>
body {
background-color: black;
color: white;
font-family: Helvetica, Verdana, Sans Serif;
font-size: 10px;
}
#no {
display: none;
}
#ball {
width: 20px;
height: 20px;
border-radius: 10px;
[ul]
[li]webkit-radius: 10px;[/li]
[/ul] background-color: red;
position:absolute;
top: 0px;
left: 0px;
}
</style>
<script>
// Position Variables
var x = 0;
var y = 0;
// Speed - Velocity
var vx = 0;
var vy = 0;
// Acceleration
var ax = 0;
var ay = 0;
var delay = 10;
var vMultiplier = 0.01;
window.onload = function() {
if (window.DeviceMotionEvent==undefined) {
document.getElementById("no").style.display="block";
document.getElementById("yes").style.display="none";
} else {
window.ondevicemotion = function(event) {
ax = event.accelerationIncludingGravity.x;
ay = event.accelerationIncludingGravity.y;
}
setInterval(function() {
vy = vy + -(ay);
vx = vx + ax;
var ball = document.getElementById("ball");
y = parseInt(y + vy * vMultiplier);
x = parseInt(x + vx * vMultiplier);
if (x<0) { x = 0; vx = 0; }
if (y<0) { y = 0; vy = 0; }
if (x>document.documentElement.clientWidth-20) { x = document.documentElement.clientWidth-20; vx = 0; }
if (y>document.documentElement.clientHeight-20) { y = document.documentElement.clientHeight-20; vy = 0; }
ball.style.top = y + "px";
ball.style.left = x + "px";
document.getElementById("pos").innerHTML = "x=" + x + "<br />y=" + y;
}, delay);
}
};
</script>
</head>
<body>
<div id="content">
<h1>Move the Ball</h1>
<div id="yes">
<p>Tilt your device to move the ball. This sample is using Device Orientation and Motion API compatible with iOS since 4.2</p>
<p>Mantain your device in portrait orientation for better results (you can lock it)</p>
<div id="pos">x=0<br />y=0</div>
<div id="ball"></div>
</div>
<div id="no">
Your browser does not support Device Orientation and Motion API. Try this sample with iPhone, iPod or iPad with iOS 4.2+.
</div>
</div>
</body>
</html>