タッチした時の処理
ゲームが開始され数字にタッチされた場合には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";
}
