ゲーム開始の処理

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

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

次にスコアとカウンタの設定を行います。ここでは10回タッチしてゲームオーバーとなるようにしています。

設定が終わったら、タッチする座標値を表示します。これはnewPoint()関数で行います。newPoint()関数内ではMath.random()を使って乱数を求めます。座標値は変数に入れておき、タッチした時の座標と比較するようにします。 タッチすべき座標値を画面上に表示し完了です。

ゲーム開始前の画面

ゲーム開始時の最初の画面

コード01

        function gameStart(){
            document.getElementById("gameForm").style.visibility = "hidden";
            gameFlag = true;    // ゲーム中であることを示すフラグ
            score = 0;  // スコア(誤差)を0にする
            count = 10; // 10回タッチしたら終わり
            document.getElementById("msg").innerHTML = "";  // 表示されているメッセージを消去
            document.getElementById("result").innerHTML = "";   // 表示されている座標値を消去
            newPoint();
        }

コード02

        function newPoint(){
            px = Math.floor(Math.random() * 200) + 50;  // 横は50~250まで
            py = Math.floor(Math.random() * 200) + 100; // 縦は100~300まで
            document.getElementById("msg").innerHTML = "座標("+px+","+py+")をタッチせよ!";
        }