iPhoneゲーム自作工房3 - タッチポイントゲームを作成

タッチした時の処理

画面がタッチされた場合、touchstartイベントが発生します。今回はタッチされるとcheckPoint()関数が呼び出されます。呼び出された時点でゲーム中かどうかを判別します。ゲーム中でない場合には以後の処理を行わないようにします。 タッチした座標を以下の2行で取得します。

            var x = event.touches[0].pageX;
            var y = event.touches[0].pageY;

この座標値と指定された座標値の差分を求め画面に表示します。差分をスコアに加算するためMath.abs()を使って絶対値に変換しています。Math.abs()により負数は正数になります。スコアは横方向と縦方向の差分の両方を加算します。

タッチしたらカウンタ変数countから1を引きます。もし、0より大きい場合には新たな座標を指定します(関数newPoint()を呼び出した後に関数から抜けます)。

0の場合には指定回数タッチし終わった、つまりゲームが終了したということになるのでゲーム中であることを示す変数gameFlagをfalseにし、スコアを表示します。再度ゲームを行うことができるようにゲーム開始ボタンを表示します。

コード03

        function checkPoint(){
            if (!gameFlag) return;  // ゲーム中でなければ処理しない
            var x = event.touches[0].pageX; // タッチされた横位置を取得
            var y = event.touches[0].pageY; // タッチされた縦位置を取得
            var dx = Math.abs(px - x);  // 横の差分を求めて得点とする
            var dy = Math.abs(py - y);  // 縦の差分を求めて得点とする
            document.getElementById("result").innerHTML = "タッチした座標 ("+x+","+y+")／";
            document.getElementById("result").innerHTML += "誤差 ("+dx+","+dy+")";
            score = score + dx + dy;
            count--;
            if (count > 0) {    // 回数があるなら
                newPoint(); // 新たな座標を示す
                return;
            }else{  // 指定回数終わった時の処理
                gameFlag = false;   // ゲームを終了
                var txt = "あなたのタッチ誤差は"+score+"ポイントです。0を目指しましょう";
                document.getElementById("msg").innerHTML = txt;
                document.getElementById("result").innerHTML = "";
                alert(txt);
                document.getElementById("gameForm").style.visibility = "visible";
            }
        }