敵車の生成

これまでと大きく異なるのが、この敵車の生成部分です。これまではグローバル変数を使って管理していました。簡単なゲームであれば管理する変数も少なくて済みますが、RPGやシミュレーションゲームなどは管理する変数/パラメータが膨大になります。そうなると膨大なグローバル変数を管理するのは難しくなりプログラムの動作に不具合を起こす可能性も高くなります。

そこで、敵車などの内部情報は隠してしまいます。これにより大幅にグローバル変数が減るだけでなく、簡単に情報(プロパティ)や機能(メソッド)を追加することができるようになります。

オブジェクト指向にする、と言っても難しいものではありません。外にあったものを中に入れるだけです。実際のプログラムはコード03のようになります。this.xとかthis.y、this.dxなどとありますが、thisというのはここでは敵車を示します。生成した敵車のX座標、Y座標という意味になります。少し比較してみましょう。これまでは以下のようにして敵車を管理することになります。

var x = new Array();
var y = new Array();
var dx = new Array();
var dy = new Array();
var id = new Array();

これをオブジェクト指向にしてやると以下のようになります。

function createEnemy(){
    this.x = 設定したい値;
    this.y = 設定したい値;
    this.dx = 設定したい値;
    this.dy = 設定したい値;
    this.id = 設定したい値;
}

createEnemyは関数名(クラス名)です。ただし、これだけでは敵車は全く生成されません。敵車を生成するにはnewを使う必要があります。実際のプログラムはコード04になりますが、余計なものが少し入っているので抜粋すると以下のようになります。

            for (var i=0; i<maxCar; i++){
                enemy[i] = new createEnemy("car"+i);
            }

new createEnemy()とすることで初めて敵車(オブジェクト)が生成されます。ゲームに必要な数だけ生成して敵車の情報をまとめて管理するための配列変数enemyに入れます。生成された時点で敵車を画面上に表示する必要もあります。敵車を生成するためにdocument.createElement("img")として<img>タグを生成します。生成された<img>タグのsrcプロパティには敵車の画像があるURL、widthには横幅、heightには縦幅を指定します。また、表示位置(出現位置)も設定し、最後にdocument.body.appendChild()を使って画面上に表示すれば完了です。

コード03

        function createEnemy(eID){
            this.x = Math.floor(Math.random() * 280) + 20;
            this.y = Math.random() * -100 - 24; // 最初の位置
            this.move = moveEnemy;  // 移動処理を行う関数名
            this.dx = Math.random() * 3 - 1;
            this.dy = Math.random() * 10 + 4;
            this.id = eID;  // 敵車のID
            var imgObj = document.createElement("img");
            imgObj.id = eID;
            imgObj.src = "images/enemy.gif";
            imgObj.width = enemyCarW;
            imgObj.height = enemyCarW;
            imgObj.style.position = "absolute";
            imgObj.style.left = this.x;
            imgObj.style.top = this.y;
            document.body.appendChild(imgObj);
        }

コード04

        function startEnemy() {
            for (var i=0; i<carLimit; i++) {
                enemy[i] = null;    // 全ての敵車を消す
                var img = document.getElementById("car"+i);
                if (img != null) {
                    img.style.top = -100;   // 画面外に移動させておく
                }
            }
            for (var i=0; i<maxCar; i++){
                enemy[i] = new createEnemy("car"+i);
            }
        }