難易度の調整と改造について

このゲームでは座標を分かりやすくするために背景画像をグリッド(方眼紙)にしてあります。グリッドを目安にすれば、かなり近い座標をタッチすることが可能です。ゲームをより、難しいものにするには背景画像をなくしてしまう、つまり真っ白など単色にしてしまう方法もあります。また、タッチした瞬間の座標を取得していますが、タッチし終わった時の座標にしてみるのもよいでしょう。

＊なお、このプログラムは自由に改造して配布しても問題ありません。画像やプログラム書き換えて楽しんでください。

完成したプログラムコード

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta name="viewport" content="initial-scale=1, user-scalable=no">
    <title>タッチポイントゲーム</title>
    <style type="text/css"><!--
        h1 { font-size:14pt; }
        body { background-image:url(images/grid.gif) }
    --></style>
    <script type="text/javascript"><!--
        // ===============================================
        // イベントを設定
        // ===============================================
        window.addEventListener("load", function(){
            document.addEventListener("touchstart", checkPoint, false);
        });
        // ===============================================
        // タッチした時の座標を求めスコアに加算する
        // ===============================================
        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";
            }
        }
        // ===============================================
        // タッチするための座標値を生成
        // ===============================================
        function newPoint(){
            px = Math.floor(Math.random() * 200) + 50;  // 横は50～250まで
            py = Math.floor(Math.random() * 200) + 100; // 縦は100～300まで
            document.getElementById("msg").innerHTML = "座標("+px+","+py+")をタッチせよ!";
        }
        // ===============================================
        // ゲーム開始
        // ===============================================
        function gameStart(){
            document.getElementById("gameForm").style.visibility = "hidden";
            gameFlag = true;    // ゲーム中であることを示すフラグ
            score = 0;  // スコア（誤差）を0にする
            count = 10; // 10回タッチしたら終わり
            document.getElementById("msg").innerHTML = "";  // 表示されているメッセージを消去
            document.getElementById("result").innerHTML = "";   // 表示されている座標値を消去
            newPoint();
        }
    // --></script>
    </head>
    <body>
    <h1>タッチポイントゲーム</h1>
    <div id="msg"></div>
    <div id="result"></div>
    <form id="gameForm">
        <input type="button" value="ゲーム開始" onClick="gameStart()">
    </form>
    </body>
</html>