「JavaScript」 ジャイロセンサーでボールをコロコロ

javascriptスマートフォンの傾きの数値を取れるらしいです。jsdo.itというサイトで、こちらの作品を見ていたのですが、

jsdo.it

スマートフォンを傾けると、傾けた方向にキャラクターが転がるんですね。へえー、こんなことできるんだ、と思いまして、僕も何かを転がしたくなりまして、安易な発想ですが、バスケットボールを転がすことにしたわけです。

jsdo.it

ボールを転がして、ゴールを通過させるという、しょーもないものなんですけども、ボールを転がすにあたって上に貼ったすごい人のコードを見て勉強しようと思いました。でも、コードが長いんですね。僕はおうちゃくをしまして、「javascript スマホ 傾き」で検索しました。 ある記事によると、

f:id:carrot_boy:20170908123339p:plain

というように、それぞれの軸に対しての傾きの値が取れると説明がされていました。文だけでは、想像できないと思うので、絵付きの説明がされているサイトがありますので見てください。絵だけ見ると、alphaの値を取れば、スマホの傾きの数値がわかるように思えます。しかし、いくらスマホを回転させても、回転に対応した数値が取れないんですね。よく説明文を読むと、alphaはスマホの頭が向いている、東西南北の方角を指す値らしいです。alphaじゃダメなんだ、と思った僕は、もう一度、jsdo.itのコードを読むことにしました。すると、betaとgammaの値を取って、計算して、傾きの数値を導き出していることがわかりました。僕は数学が苦手なので、式を見てもどうゆことかわかりませんでした。結局、計算の部分のコードをそのまま使わせてもらいました。誰か頭のいい人が、なぜこうゆう計算になるのか説明して欲しいです。

 

僕の使っているスマホでVR対応ゲームをしようとすると、「非対応です」と言われます。その原因は、僕のスマホジャイロセンサーがないからだと思っていました。でも、javascriptでデバイスの傾きの値を計算できたわけですよ。今後、現在非対応の機種のスマホでも遊べる、ブラウザで動くVRゲームが遊べるかも、と期待してしまいました。他にできない理由があるのかもしれませんけどね。