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"; };

コメントを残す

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