iPhoneゲーム自作工房2 - 隕石破壊ゲームの作成

隕石を移動させる処理

隕石を移動させる処理はタイマーで0.1秒ごとに呼び出されるmoveMeteo()で行っています。まず、隕石を移動させるには隕石の座標値を示す配列変数mx, myにmOffsetとmSpeed配列変数の内容(数値)を加算します。加算したら新しい座標に隕石を表示します。これは隕石オブジェクト (<img>タグ) のスタイルシートのleftとtopプロパティに座標値を入れるだけです。

隕石が一定座標値よりも下に来た場合には、都市に隕石が落下したとみなしゲームオーバーの処理を行わなければなりません。このゲームでは240ピクセルよりも隕石のY座標が大きくなったらゲームオーバーとみなします。ゲームオーバーとなった場合にはclearInterval()でタイマーを解除します。タイマーを解除しないとゲーム中でもないのにmoveMeteo()関数が呼び出されiPhoneの処理速度が低下してしまいます(もしくはiPhoneに負荷がかかる可能性がある)。

ゲームオーバーとなったのでゲーム中かどうかを示すgameFlag変数にfalseを入れます。あとは、スコアを表示し炎上した街の画像に差し替えれば完了です。隕石の移動と同時にもう1つ処理しなければならないものがあります。それは爆発処理です。爆発処理は関数bakuhatsu()で行っているため、最後にこの関数を呼び出します。

コード04

        function moveMeteo(){
            for (var i=0; i<cnt; i++){  // 最大表示数(cnt)分繰り返す
                mx[i] = mx[i] + mOffset[i]; // X座標を加算する
                my[i] = my[i] + mSpeed[i];  // Y座標を加算する
                var mID = "m"+i;    // ミサイルのIDを求める
                document.getElementById(mID).style.left = mx[i];    // 指定した位置に横隕石の座標を設定
                document.getElementById(mID).style.top = my[i]; // 指定した位置に縦隕石の座標を設定
                if (my[i] > 240){   // 240は地平線でこれ以上になったら隕石が街に落下したとみなす
                    clearInterval(timerID); // タイマーを停止する
                    gameFlag = false;   // ゲームフラグをfalseにしゲームを継続できないようにする
                    document.getElementById("msg").innerHTML = "Game Over!!<br>Score = "+score; // スコアを表示
                    document.getElementById("townImage").src = "images/end.png";    // 街が炎上した画像にする
                    document.getElementById("gForm").style.visibility = "visible";  // ゲーム開始ボタンを表示する
                }
            }
            bakuhatsu();    // 爆発の表示
        }