Accelerometer Frage

[Fabian Boulegue]

Hallo,

leider konnte ich im Internet noch nix finden und bin ein JavaScript Neuling.
Für meine Seite (iOS und Android only) würde ich gern eine Div durch eine andere bewegen ... dieses soll der User durch das neigen des Devices machen.
Sprich es soll was hin und her "fall".

Nun habe ich das ganze mit einem CSS Objekt gefunden jedoch bekomme ich das nun nicht auf eine Div angewendet.

Vielleicht kann mir ja jemand zur Hand gehen und mir ggf. etwas helfen.

Hier gibt es Infos zur API an sich http://www.murraypicton.com/2011/01/exploring-the-iphones-accelerometer-through-javascript/

Und hier einmal der Code für CSS

<script type="text/javascript">

var x = 0, y = 0,
    vx = 0, vy = 0,
	ax = 0, ay = 0;
	
var sphere = document.getElementById("sphere");

if (window.DeviceMotionEvent != undefined) {
	window.ondevicemotion = function(e) {
		ax = event.accelerationIncludingGravity.x * 5;
		ay = event.accelerationIncludingGravity.y * 5;
		document.getElementById("accelerationX").innerHTML = e.accelerationIncludingGravity.x;
		document.getElementById("accelerationY").innerHTML = e.accelerationIncludingGravity.y;
		document.getElementById("accelerationZ").innerHTML = e.accelerationIncludingGravity.z;

		if ( e.rotationRate ) {
			document.getElementById("rotationAlpha").innerHTML = e.rotationRate.alpha;
			document.getElementById("rotationBeta").innerHTML = e.rotationRate.beta;
			document.getElementById("rotationGamma").innerHTML = e.rotationRate.gamma;
		}		
	}

	setInterval( function() {
		var landscapeOrientation = window.innerWidth/window.innerHeight > 1;
		if ( landscapeOrientation) {
			vx = vx + ay;
			vy = vy + ax;
		} else {
			vy = vy - ay;
			vx = vx + ax;
		}
		vx = vx * 0.98;
		vy = vy * 0.98;
		y = parseInt(y + vy / 50);
		x = parseInt(x + vx / 50);
		
		boundingBoxCheck();
		
		sphere.style.top = y + "px";
		sphere.style.left = x + "px";
		
	}, 25);
} 


function boundingBoxCheck(){
	if (x<0) { x = 0; vx = -vx; }
	if (y<0) { y = 0; vy = -vy; }
	if (x>document.documentElement.clientWidth-20) { x = document.documentElement.clientWidth-20; vx = -vx; }
	if (y>document.documentElement.clientHeight-20) { y = document.documentElement.clientHeight-20; vy = -vy; }
	
}

</script>

Ich wäre mehr als dankbar!