JavaScriptで加速度センサを利用する

JavaScriptではevent.accelerationIncludingGravityで簡単にスマホの加速度センサにアクセスすることが出来ます。

これを使って簡易水平器(のようなもの)を作ってみました。

次のタグを定義

<canvas id="canv"/>

scriptタグ内

//初期設定
var x,y,vx=0,vy=0,ax,ay;
var width=window.screen.width;
var height =window.screen.height;
x=width/2;
y=height/2;

window.addEventListener('devicemotion', function(event) {
//加速度を取得
var gv = event.accelerationIncludingGravity;
ax = gv.x;
ay = -gv.y;

//速度を更新
vx+=ax*4;
vy+=ay*4;
vy*=0.99;
vx*=0.99;

//画面外に出ないように反射
if(x<0&&vx<=0){
vx=-vx*0.9;
}
if(x>width&&vx>=0){
vx=-vx*0.9;
}
if(y<0&&vy<=0){
vy=-vy*0.9;
}
if(y>height&&vy>=0){
vy=-vy*0.9;
}

//位置を後進
x+=vx/20;
y+=vy/20;

//描画処理
var canvas = document.getElementById('canv');
canvas.width=width;
canvas.height=height;
var context = canvas.getContext('2d');

context.fillStyle = 'rgb(0,0,0)'; 
context.fillRect(0,0,width,height);

context.strokeStyle = 'rgb(0,0,255)'; 
context.fillStyle = 'rgb(255,0,0)'; 
context.fillRect(parseInt(x),parseInt(y),10,10); 

});

参考：http://tech.aainc.co.jp/archives/1778