タッチした時の処理

ゲームが開始され数字にタッチされた場合にはtouchstartイベントが発生し関数checkNumber()が呼び出されます。ゲーム中ではない場合には以後の処理を行う必要がないので変数gameFlagがfalseならreturnとし関数から抜けます。次に変数touchFlagがfalseであればゲーム開始ボタンが押された後、どの数字もタッチしていないことになるので、現在の時間(ミリ秒)を変数startTimeに入れて開始時間とします。

タッチされたマス目の数字が順番どおりのものかを判別します。これは変数touchCountと配列変数randの値を比較します。このゲームでは押された時にマス目のIDを渡すことになっており、このID名がそのまま配列変数randの参照番号として指定できるようになっています。つまり、押されたマス目にかかれている数字はrand[ID名]として読み出すことができます。ちなみに別の方法としては押されたマス目の内容(数字)を読み出して比較する方法もあります。

押すべき数値と一致していた場合にはマス目の背景色をグレーにします。これはスタイルシートのbackgroundColorプロパティにカラーコードを設定します。また、二度とタッチできないようにイベントを解除しておきます。25までタッチされたらゲーム終了になります。終了時点での時間(ミリ秒)を求め、開始時間との差分をアラートダイアログに表示します。ミリ秒なので1000で割ることにより秒数での表示にすることができます。

コード04

        function checkNumber(uID){
            if (!gameFlag) return;  // ゲーム中でなければ処理しない
            if (!touchFlag){
                touchFlag = true;   // 一度タッチされたのでフラグを立てる
                startTime = (new Date()).getTime(); // 開始時間を取得
            }
            var n = rand[uID];  // タッチされたボックスの番号を読み出す
            if (n != touchCount) return;    // タッチ数と異なる場合は何もしない
            endTime = (new Date()).getTime();   // 終了時間を取得
            touchCount++;
            document.getElementById(uID).style.backgroundColor = "#4f4f6f"; // 背景色をグレーにする
            document.getElementById(uID).onTouchStart = null;   // イベントを解除
            if (touchCount < maxCount+1) return;    // 全部タッチし終わっていない場合は処理しない
            var sec = (endTime - startTime) / 1000; // ミリ秒なので秒数にする
            alert(sec+"秒かかりました");
            gameFlag = false;   // ゲームが終了したのでフラグをfalseにする
            document.getElementById("gameForm").style.visibility = "visible";
        }