iPhoneゲーム自作工房10 - 認識力を鍛えられそうなゲーム

正解かどうかの判定

○×ボタンが押されたら表示されている文字が「マイコミジャーナル」かどうかを調べます。この処理を行うのが関数checkTitle()です。この関数内でこれまでのゲームには見られない部分が以下の行です。

if (buttonType == 'ok') {   // OKボタンの場合
    flag = (txt == okTitle);
}else{  // NGボタンの場合
    flag = (txt != okTitle);
}

特にflag = (txt == okTitle);の部分は数式でもなくメソッドやプロパティでもありません。これは条件式で(txt == okTitle)が成立した場合にはtrue、不成立の場合はfalseになります。つまり変数flagにはtrueまたはfalseが入ることになります。

○ボタンと×ボタンの場合では結果は反対になるので○ボタンの場合はflag = (txt == okTitle)、×ボタンの場合はflag = (txt != okTitle)の条件式になります。変数flagの値がtrueであれば正解になるのでif()を使って正解時と不正解時の処理を振り分けます。

今回は不正解時には画面を赤く光らせています。これはドキュメントの背景を示すスタイルシートプロパティdocument.body.style.backgroundColorにカラー名またはカラーコードを指定することで画面を好きな色にすることができます。ただ、ずっと光らせておくわけにはいかないので0.2秒経過したら元の白色に戻します。これはタイマーであるsetTimeout()を使って行います。setTimeout()の最初のパラメータには関数名しか指定できないと思っている人もいるかもしれません。setTimeout()の最初のパラメータには通常のJavaScriptのコードを、そのまま書くことが可能です。不正解時には背景を白くした後で関数setTitle()を呼び出して次の問題を表示させます。

不正解時には0.2秒ボタンを押せないようにペナルティを課します。これを可能にしているのがロック処理です。ロックする場合には変数lockFlagにtrueを入れます。trueであればロックされており、○×ボタンを押すことができないということです。

コード03

function checkTitle(buttonType){
    if (!gameFlag) return;
    if (lockFlag) return;   // ロック中ならボタン処理を行わない
    if (!startFlag) {
    startTime = (new Date()).getTime(); // ゲーム開始時間
    startFlag = true;   // 計測開始
}
var txt = document.getElementById("mTitle").innerHTML;
if (buttonType == 'ok') {   // OKボタンの場合
    flag = (txt == okTitle);
}else{  // NGボタンの場合
    flag = (txt != okTitle);
}
if (flag) { // 押したボタンが正解だった場合
    document.getElementById("mTitle").innerHTML = "正解!!";
    score++;
    document.getElementById("gameScore").innerHTML = score + "点";
    setTitle(); // 正解の場合はすぐに次の問題に進む
}else{
    document.getElementById("mTitle").innerHTML = "間違い！";
    document.body.style.backgroundColor = "red";    // 間違っていたので画面を赤にする
    // 失敗時には0.2秒後に次の問題を表示（これでタイムロスになる）してボタンが押せないようにロックする
    setTimeout('document.body.style.backgroundColor = "white";setTitle()', 200);
    lockFlag = true;
}
}

コード04

    <input type="button" value="×" id="NGbutton" onTouchStart="checkTitle('ng')">
    <input type="button" value="○" id="OKbutton" onTouchStart="checkTitle('ok')"><br>