左右の傾きを検出できるようになったところなので何か応用を。……スキーゲームでも作りましょうか。
適当にどんな感じにするか決めて……(汚い字でスミマセン)
作ったのが以下(単独のプレイページはこちら)。
デバイス左右の傾きでスキーヤーが左右に動きます。ゲートをくぐって得点を競いましょう。
一応キーボードにも対応しました。あえて傾き操作のみにしようと思っていたのですが、開発中のテストプレイが面倒だったので対応しました。でも傾けるインタフェースに合わせてわざと操作しづらくしてあります。
ソースコードはGitHubで。
あ、そういえば、Nexus7(2012)で試したらdeviceorientationを使った方法だと姿勢が安定しなかったので、devicemotionを使って傾きを検出しています。Nexus5やXperia Z2だとどちらを使ってもそれほど違いは無かったのですが、Nexus7(2012)だと大きく違いが出ました。キャリブレーションすれば直るかもしれませんが、一応大丈夫な方を取りました。
スキーヤーの当たり判定は体の前半分にしかありません。なので、後ろ半分はポールに当たっても大丈夫です。
フィールドの座標系は上がY正方向、右がX正方向、原点はスタート地点下部中央という取り方をしてみました。慣れない座標系を使うと色々ミスをしますね。パパッと作りたい場合は普通にY正方向が画面下になる座標系の方が良かったかなぁと思ったり。
メモ書きではleftWallとrightWall(左右の黒い部分)というオブジェクトを見いだしていたのですが、実際に作っている途中でroad(中央の白い部分)にしました。壁だと左右を別々に管理しなければならず、かといって壁を延ばすときは同じ長さだけ伸ばすように注意しなければならないなど、少し無駄に面倒な気がしたので。
左右移動の速度調整が一番面倒でした。
あとはゲートの出現頻度。1分半(90000ms)までは100フレーム毎から40フレーム毎まで単調に減少していき、それ以降は(20+40*(100000/(100000+(time-90000))))フレーム毎という緩やかに漸近線をとりながら減少していくのを基本としつつランダムで±20フレームの揺れを入れてみました。2～3分くらいからもう少し沢山出た方が忙しくなって良いかもしれないけどどうかなぁ。
[…] 加速度センサーを使ったJavaScriptスキーゲーム | Misohena Blog […]