iPhoneゲーム自作工房5 - Googleマップ回転ゲームの作成

ゲーム開始の処理と回転方法

ゲームが開始されたら最初にゲーム開始ボタンを見えないようにします。これは、ゲーム開始ボタンが何度も押されないようにするためです。

その後、ゲーム中であることを示す変数gameFlagをtrueにします。ゲーム中でなくても画面をタッチされることがあるため、ゲーム中でない場合には処理を行わないようにするかどうかを判別するために使います。この部分は、これまで作成したゲームと全く同じ手法です。

次に回転角度を乱数を使って決めます。負の角度も可能ですが、ここでは45～134度までの角度にします。あまり角度が浅いと、少し回転させるだけでゲームが終わってしまうので、ある程度の角度にしておく必要があります。

デフォルトでは画像は0度にしておきます。Safariでは画像を回転させるにはスタイルシートのwebkitTransformに以下の形式で角度を指定します。

"rotate(●deg)"
●：角度

単純な数値ではなく文字列で指定します。"rotate(0deg)"とすると0度、"rotate(59.63deg)"とすると59.63度になります。

コード02

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