注意事項

回転させる時に注意して欲しいことがあります。それは画像の上に指をおかない、ということです。というのも画像の上でタッチしたままにすると、画像を保存するためのメニューが表示されてしまうためです。今回のゲームはSafariの画面全体を使って回転させることができますので、片方の指をiPhoneの左下に、もう片方の指を右上に持って行き回転させるようにしてください。

＊なお、このプログラムは自由に改造して配布しても問題ありません。マップの座標や種類を変更したりプログラム書き換えて楽しんでください。

完成したプログラムコード(★★★はAPIキー)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta name="viewport" content="initial-scale=1, user-scalable=no">
    <title>正確に回転だ！ゲーム</title>
    <style type="text/css"><!--
        h1 { font-size:14pt; }
        #myMap { z-index:1; position:absolute; left:50px; }
        #msg { z-index:2; }
        #result { z-index:3; }
    --></style>
    <script type="text/javascript"><!--
        // ===============================================
        // 回転させた後のイベントを設定
        // ===============================================
        window.addEventListener("load", function(){
            document.addEventListener("gesturechange", checkRotate, false);
            document.addEventListener("gestureend", saveRotate, false);
            document.addEventListener("touchmove", function(){ event.preventDefault(); }, false);
        });
        // ===============================================
        // 回転中の角度をチェックする
        // ===============================================
        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";
        }
        // ===============================================
        // 回転角度を保存する
        // ===============================================
        function saveRotate(){
            saveRot = event.rotation;
        }
        // ===============================================
        // ゲーム開始
        // ===============================================
        function gameStart(){
            document.getElementById("gameForm").style.visibility = "hidden";
            gameFlag = true;    // ゲーム中であることを示すフラグ
            kakudo = Math.floor(Math.random() * 90)+45; // 45～134度までにする
            saveRot = 0;    // 最初は0度
            document.getElementById("msg").innerHTML = kakudo+"度にせよ！";
            document.getElementById("result").innerHTML = "";
            document.getElementById("myMap").style.webkitTransform = "rotate(0deg)";
            rotFlag = false;
        }
    // --></script>
    </head>
    <body>
    <h1>正確に回転だ！ゲーム</h1>
    <div id="msg">示された角度で正確にマップを回転させましょう</div>
    <div id="result">↓ゲーム開始ボタンを押してください</div>
    <form id="gameForm">
        <input type="button" value="ゲーム開始" onClick="gameStart()">
    </form>
    <img id="myMap" src="http://maps.google.com/staticmap?center=35.691108,139.757059&zoom=17&size=200x200&maptype=mobile&key=★★★">
    </body>
</html>