ゲーム開始の処理
初期設定が終わったらゲーム開始の処理です。今回は入力フォームのボタンがタップされたらゲームを開始します。前回と異なりゲームをするたびにリロード(再読み込み)する必要はありません。ゲーム開始の時に呼ばれるのがstartGame()関数です。この関数内で表示する隕石の数や難易度などを設定します。
まず、関数の先頭で以下のように表示処理を行っていますが、これは一度ゲームが行われた後に表示される爆発炎上した都市や爆発、メッセージなどを非表示にするものです。
document.getElementById("townImage").src = "images/bg.png";
document.getElementById("gForm").style.visibility = "hidden";
document.getElementById("msg").innerHTML = "";
document.getElementById("bak").style.top = -100;
document.getElementById("dispSC").innerText = "Score 0";
次に隕石の座標値を設定します。隕石の存在を示すフラグ変数 (mFlag) もfalseに設定し最初の時点では全ての隕石が存在しないことにします。Y座標を-50とすることで画面外にし見えないようにしておきます。隕石のサイズは48×48ピクセルなので-50とすれば完全に見えないわけです。あとは、document.getElementById()で隕石のオブジェクト (今回の場合は<img>タグ) のスタイルシートに座標値を入れます。
これをfor()を使って指定回数繰り返します。初期化される隕石の数は10個ですが、さすがにそこまで多くなるとゲームとして難しい面もありますが、最大出現数に関しては他の部分で指定できるようにします。
次にゲームの実行に必要な変数を初期化します。gameRankはゲームの難易度を上げるためのカウンタ変数です。隕石を8個破壊するとゲームのランクが1つ上がります。ただし、無制限に上がるのではなく上限があります。このゲームでの難易度は「隕石の数」と「落下速度」の2点です。ゲームの進行が進めば隕石の数が増え、落下速度も速いものが出現します。隕石の最大出現数はcnt変数に入れてあり、最初の段階では3つとしています。cnt変数は隕石の数だけでなく、同時に落下速度も示しています。数が大きくなれば落下速度も、それにともなって速くなる(大きくなる)という仕組みです。
変数gameFlagはゲーム中かどうかを示すフラグ変数です。これはゲーム中どうかを示すものでゲーム中であればtrue、ゲーム中でなければfalseになります。ゲームが終了した後で隕石がタップされてしまうのを防ぐためにあります。変数bakFlagは爆発表示を示すものです。爆発中であればtrue、そうでなければfalseになります。このゲームでは爆発表示は1つだけなので、このように変数を1つだけ用意してあります。
gameRank = 0; // ゲームの難易度
cnt = 3; // 出現させる隕石の数。最初は3つにする
score = 0; // スコアを0点にする
gameFlag = true; // ゲーム中どうかのフラグ (trueならゲーム中)
bakFlag = false; // 爆発表示フラグ
次に最初に隕石を発生させます。隕石を発生させる関数は別に用意してあります。startMeteo()関数を呼び出すことで隕石が生成されます。あとは、隕石の移動を行うための関数をタイマーを使って一定時間ごとに呼び出します。これはsetInterval()を使い、隕石を移動させるための関数moveMeteo()を呼び出します。
for (i=0; i<cnt; i++) startMeteo(i); // 隕石を生成する
timerID = setInterval("moveMeteo()",100); // 0.1秒ごとに隕石を移動させる関数を呼び出す
 |
ゲーム開始前の画面 |
コード02
function startGame(){
document.getElementById("townImage").src = "images/bg.png";
document.getElementById("gForm").style.visibility = "hidden";
document.getElementById("msg").innerHTML = "";
document.getElementById("bak").style.top = -100;
document.getElementById("dispSC").innerText = "Score 0";
for (var i=0; i<10; i++){
mFlag[i] = false; // 最初の時点では隕石は存在しないことにする
mx[i] = 0; // 隕石の開始X座標
my[i] = -50; // 隕石の開始Y座標
var mID = "m"+i; // 隕石のIDを求める
document.getElementById(mID).style.left = mx[i]; // 指定した横位置に隕石の座標を設定
document.getElementById(mID).style.top = my[i]; // 指定した縦位置に隕石の座標を設定
}
gameRank = 0; // ゲームの難易度
cnt = 3; // 出現させる隕石の数。最初は3つにする
score = 0; // スコアを0点にする
gameFlag = true; // ゲーム中どうかのフラグ (trueならゲーム中)
bakFlag = false; // 爆発表示フラグ
for (i=0; i<cnt; i++) startMeteo(i); // 隕石を生成する
timerID = setInterval("moveMeteo()",100); // 0.1秒ごとに隕石を移動させる関数を呼び出す
}
