JavaScript でデバイスの傾きを取得してみる

iPhone は JavaScript で加速度センサーへアクセスできるということなので試してみた。どうも Android は動かない。

画面を傾けると下の赤いやつが傾きに応じて動く。

傾きX : ,
傾きY : ,
傾きZ :

JavaScript

var maxW = document.getElementById("acceleration").clientWidth - 30;
var maxH = 200 - 30;
var obj = document.getElementById("ac-obj");
var put = {
"x":document.getElementById("ac-x"),
"y":document.getElementById("ac-y"),
"z":document.getElementById("ac-z"),
};
window.addEventListener('devicemotion', function(event) {
var x = event.accelerationIncludingGravity.x; //傾きX
var y = event.accelerationIncludingGravity.y; //傾きY
var z = event.accelerationIncludingGravity.z; //傾きZ
animate(x, y, z);
put.x.innerHTML = x;
put.y.innerHTML = y;
put.z.innerHTML = z;
});
function animate(x, y, z){
var d = 6;
var objX = parseInt(obj.style.left);
var objY = parseInt(obj.style.top);
if(x < -1)
objX -= d;
if(x > 1)
objX += d;
if(y < -1)
objY += d;
if(y > 1)
objY -= d;
if(objY < 0)
objY = 0;
if(objY > maxH)
objY = maxH;
if(objX < 0)
objX = 0;
if(objX > maxW)
objX = maxW;
obj.style.left = objX + "px";
obj.style.top = objY + "px";
};

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください