背景画像がフェードアウトしたら次のステージの画像を読み込まなければなりません。読み込む航空写真の座標や表示倍率はあらかじめ配列に入れておきます。ただし、座標値や倍率を別々に入れておくのではなく、URLパラメータとしてグーグルのマップサーバーに渡す文字列として入れておきます。このようにしておけば配列内の要素を文字列として連結しURLパラメータとして渡すだけで済むためです。

コード02

var area = [
    "-21.143431,151.390228&zoom=10", // グレートバリアリーフ
    "35.689509,139.691752&zoom=18", // 東京都庁
    "35.632291,139.880719&zoom=16", //　ディズニーランド
    "39.022151,125.732539&zoom=16", // 北の都市
    "48.804263,2.121434&zoom=17",   //　ベルサイユ宮殿
    "-14.690307,-75.123112&zoom=18", //　ナスカの地上絵
    "41.890234,12.492324&zoom=17",  // ローマ
    "48.858472,2.294716&zoom=17",   //　エッフェル塔
    "29.978989,31.134009&zoom=16",  //　エジプト
    "37.418785,-122.057011&zoom=17",    // 某社
    "38.897554,-77.036519&zoom=18"  // 白い家  
];

グーグルのマップサーバーへのリクエストは以下の一行です。

document.body.style.backgroundImage = gmapPref + area[areaCount] + gmapPost;

これで読み込みが終われば自動的に航空写真が表示されます。読み込まれたら全面に表示されているdivタグを透明にしますが、ここではイベントを検知せずに1.5秒経過したら航空写真が読み込まれているものとして以下のように強制的にdivタグを透明にしています。

setTimeout('document.getElementById("cloud").style.opacity = 0;', 1500);

運悪くサーバーからの応答がない場合には背景画像は真っ黒になります。ここらへんは微妙なところですが、延々とサーバーからの応答を待つよりも次々と切り替え、送られてきた画像があればそれを使うようにした方が、ずっと真っ白けのままよりよいだろうと思われるからです。ここらへんは考え方もありますし、プログラムを改良して航空写真が読み込まれた後に表示するように改造してもよいでしょう。

コード03

if (bgY > 640) {
    bgY = 410;
    stage = stage + 1;  // ステージを増やす
    document.getElementById("stageNumber").innerHTML = "STAGE "+stage;
    areaCount = areaCount + 1;  // エリアを増やす
    areaCount = areaCount % area.length;    // 剰余で延々と繰り返すようにする
    document.body.style.backgroundImage = gmapPref + area[areaCount] + gmapPost;
    enemyCounter++;
    enemyCounter = enemyCounter & 15;   // 16機下にいったら1機ずつ増やす
    if (enemyCounter == 0){
        if (maxEnemy < enemyLimit){
            enemy[maxEnemy] = new createEnemy("teki"+maxEnemy);
            maxEnemy++;
        }
    }
    setTimeout('document.getElementById("cloud").style.opacity = 0;', 1500);
}
document.body.style.backgroundPositionY = bgY;