ジェスチャーによる回転イベント発生時の処理

回転ジェスチャーが発生すると関数checkRotate()が呼び出されます。何度回転したのかはイベントオブジェクトのrotationプロパティに入っています。SafariではFirefoxなどと同じイベントハンドラ(イベント発生時に呼び出す関数)にイベントオブジェクトが渡されますが、これとは別にInternet Explorerとの互換性を保つためのeventオブジェクトも用意されています。ここでは関数のパラメータではなく、eventオブジェクトのrotationプロパティを参照しています。

event.rotationで回転角度を読み出したら、その値を画像の回転角度として指定します。回転角度は小数値になるためMath.round()を使って四捨五入し整数化しています。回転させた角度と指示した回転角度が一致しているかどうか調べ、一致している場合のみゲームクリアの処理を行います。

一致している場合は、現在の時間(ミリ秒)を求め、ゲーム開始時の時間を引きます。結果はミリ秒になっているので1000で割ると秒数となります。この時間をアラートダイアログに表示します。 最後に、ゲーム開始ボタンを表示してできあがりです。

回転中に角度が表示される。基本的にはリアルタイムに表示されるが、場合によっては一度ジェスチャーを解除しないと表示されないことがある

ゲームオーバー時の画面。回転させるまでの時間が表示される

再度ゲーム開始ボタンをクリックするとゲームをプレイすることができる

コード03

        function checkRotate(){
            if (!gameFlag) return;  // ゲーム中でなければ処理しない
            if (!rotFlag){
                rotFlag = true;
                startTime = (new Date()).getTime(); // 開始時間を取得
            }
            currentRot = Math.round(saveRot + event.rotation) % 360;    // 回転角度を取得
            document.getElementById("result").innerHTML = "現在の回転角度："+currentRot+"度";
            document.getElementById("myMap").style.webkitTransform = "rotate(" +currentRot+ "deg)";
            if (kakudo != currentRot) return;
            gameFlag = false;   // ゲームを終了
            var endTime = (new Date()).getTime();
            var sec = (endTime - startTime) / 1000;
            txt = "正しく回転させるまでの時間は"+sec+"秒でした";
            document.getElementById("msg").innerHTML = "";
            document.getElementById("result").innerHTML = txt;
            alert(txt);
            document.getElementById("gameForm").style.visibility = "visible";
        }