タッチした時の処理
画面がタッチされた場合、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";
}
}