簡単なシューティングゲーム作成 その６

前回まではプログラムに直接敵の登場場所などを書いていたが今回からJSONに移してみた。まずはそのJSONから。ファイル名はEventList.js、フォルダはeventという名前にした。イベントエントリの配列となっている。イベントエントリは敵の名前と登場フレーム数、登場座標が入っている。今回作るプログラムの関係で登場フレーム数の順に並べておかないと登場しない敵はでてくるので注意

var eventlist = [
    {"name": "Enemy1", "frame": 0, "x": 650, "y": 100},
    {"name": "Enemy1", "frame": 1, "x": 650, "y": 200}
]

このファイルをHTMLに読む込ませる

<script type="text/javascript" src="./event/EventList.js"></script>

次にGameView.js。GameViewのコンストラクタの中に以下の変数を宣言し、その下のプログラムを入れる。変数は現在のフレーム数と次のイベントのインデックスとなっている。プログラムの方は次のイベントを取得し、現在のフレームと登場フレームが一致するか比較している。もし一致していたら敵を登場させている。

var frame = 0;
var eventIndex = 0;

function checkEvent(){
    if(eventlist[eventIndex] && eventlist[eventIndex].frame == frame){
        var entry = eventlist[eventIndex];

        if(entry.name == "Enemy1"){
            var enemy = new Enemy1(images["Enemy1"]);
            enemy.move(entry.x, entry.y);
            gameInfo.enemies.push(enemy);
        }
            
        eventIndex++;
    }
}

最後にdrawメソッド。先程作ったcheckEventを呼び出した後、現在のフレーム数を増加するようにした

this.draw = function(){
    if(!isLoadedImage){
        return;
    }

    context.fillStyle = 'rgb(0, 0, 0)';
    context.fillRect(0, 0, 600, 400);

    //プレイヤー機の移動と描画
    playerAction();

    //プレイヤー機が撃った弾の移動と描画
    bulletsAction();
        
    //敵の行動と描画
    enemiesAction();

    //イベントがあれば追加する
    checkEvent();

    frame++;
}