iPhoneで反射神経を鍛える

脳を鍛えると言えば有名な「脳トレ」がありますが、今回はiPhone + Safariを使って反射神経を鍛えるゲームを作成してみます。このiPhone自作ゲーム工房の第一弾で作成した「プチプチiPhone 3G」は、クリック時の反応がよくありませんでした。時間を競うゲームでの反応速度の悪さはプレイヤーにストレスを与えてしまいます。そこで、今回はより素早くプレイヤーの反応を捕らえるためにiPhone+Safari専用のタッチイベントを使います。

スタートボタンを押して	番号順にマス目をタッチして
すべてをタッチし終わると	かかったタイムが表示される

さて、問題はどのようなゲームにするかです。脳みそと反射神経を鍛えるということで5×5マスに書かれた1～25までの数字を順番にタッチしていくというものにします。動いている数字をタッチするものはありますが、数字が動かなければ見た瞬間に数字を記憶して順番にタッチする、という技も使えますので、より反射神経が鍛えられるかもしれません。

タッチイベントとゲーム画面の生成

iPhoneゲーム自作工房の第3弾でタッチした場合に関するイベントを紹介しましたが、再度以下の表に示します。

タッチした瞬間に処理したいのでtouchstartを使えばよいことになります。ただし、前回とは違う方法でイベントを設定してみます。前回はaddEventListener()を使いましたが、今回は<div>タグにonTouchStartを記述する方法を使います。どちらの方法でも結果的には同じです。また、今回のゲームはマルチタッチ(2本以上の指でタッチ)には対応していません。

まず最初にページが読み込まれたらゲーム画面を生成します。5×5マスを描くには繰り返し処理を行うfor()を使います。繰り返しの中で<div>タグを生成しHTML文字列として連結していきます。この時にタッチイベントも同時に指定しておきます。ここではタッチイベントが発生したらcheckNumber()関数を呼び出すようにしています。 このcheckNumber()にはタッチされた<div>タグのIDがパラメータとして渡されます。このIDは0から順番に割り当てていきます。このID名(番号)と数字を格納してある配列変数の参照番号を対応させることでプログラムを簡素化しています。

説明の順序が逆になってしまいましたが、1～25までの数字は配列変数randに入っています。

コード01

        window.onload = function(){
            var boxW = 60;  // マス目の横幅
            var boxH = 48;  // マス目の縦幅
            var startX = 10;    // マス目の横の表示開始位置
            var startY = 90;    // マス目の縦の表示開始位置
            var htmlStr = "";   // 生成するHTMLを入れる変数
            for (var j=0; j<5; j++){    // 縦に5マス
                for(var i=0; i<5; i++){ // 横に5マス
                    var tempX = startX + i * boxW;
                    var tempY = startY + j * boxH;
                    htmlStr = htmlStr + '<div class="box" id="'+maxCount+'" style="position:absolute;left:'+tempX+'px;top:'+tempY+'px;" onTouchStart="checkNumber('+maxCount+')"></div>';
                    maxCount++;
                }
            }
            document.getElementById("gameScreen").innerHTML = htmlStr;
        }