devicemotion test

HTML

<canvas id="c" height="200" width="200"></canvas>

CSS

canvas {
    height: 100%;
    width: 100%;
}

JavaScript

var x = 100,
    y = 100,
    dx = 0,
    dy = 0,
    ctx;

window.addEventListener("load", function () {
    if (window.DeviceMotionEvent) {
        window.addEventListener('devicemotion', function (ev) {
        		window.alert(ev);
            var acc = ev.accelerationIncludingGravity;
            dmHdlr(acc.x, acc.y, acc.z);
        }, false);
    }
    ctx = c.getContext("2d");
    draw();

}, false);


function draw() {
    ctx.clearRect(0, 0, c.width, c.height);
    ctx.beginPath();
    ctx.arc(x, y, 5, 0, 2 * Math.PI);
    ctx.fill();
}

function dmHdlr(aX, aY, aZ) {
    dx = Math.max(-5, Math.min(5, dx - aX / 100));
    dy = Math.max(-5, Math.min(5, dy + aY / 100));
    x = Math.min(c.width, Math.max(0, x + dx));
    y = Math.min(c.height, Math.max(0, y + dy));
    window.requestAnimationFrame(draw);
}