JavaScript Maniax

■シューティングゲームをつくるその２

自機の動きをオブジェクト指向型のプログラムに修正します。

あまり使われていませんが、JavaScriptはオブジェクトを作成することが出来ます。
オブジェクト指向の概念や講義は非常に長くなるので、申し訳ありませんがここでは割愛します。JavaやC++等の参考書をご覧下さい。
今回修正するプログラムは、画面上の動き的には前回と変わりないため、どうしてもオブジェクト指向を避けたいという方は読み飛ばしても構いませんが、オブジェクト指向に慣れておくとJavaScriptで大型プログラムを組む（そんなこと普通しませんが）時に便利です。

JavaScriptでは、クラスの定義もfunctionで行います。

function plain(sx, sy){
    this.x = sx;
    this.y = sy;
}

これで、xとyというプロパティ（値）をもったplainクラスが定義されました。
この定義でコンストラクタも兼ねているため、実装するには2つの引数が必要になります。
一つ目の引数がthis.xの、二つ目の引数がthis.yの初期値として設定されます。

myplain = new plain(100, 100);

これで、plain型のオブジェクトmyplainが実装されます。
myplain.xには100、myplain.yにも100の値が初期値として設定されています。

プロパティは上記の様に定義できますので、今度はメソッド（動作）を定義します。
メソッドの定義もやはりfunctionを用いて行います。

function plain(sx, sy){
    this.x = sx;
    this.y = sy;
    this.move = plainMove;
}
function plainMove(){
    :
    this.x+=5;
    this.y+=5;
    :
}

これで、plainクラスを実装したmyplainオブジェクトの、myplain.move()を実行すると、myplainのプロパティをもってplainMoveメソッドが実行されます。

百聞は一件にしかず。上記手段を用いて、前回の自機移動ロジックをオブジェクト指向型に書き換えてみました。

[sample-a] [DL]

応用編

オブジェクト指向のいいところは、一個つくると似たものを作るのが簡単なところですね。
そこで自機を真似て敵機クラスも定義し、動かしてみましょう。
まずは敵機を表示させるSPANタグを用意しなくてはなりません。
今回は画面上同時には5機までしか出ないように作って見ます。
ここで、同じタグを繰り返し書くのは芸がないです。JavaScriptを使って記載してみましょう。

<SCRIPT language="javascript">
for(i=0;i<5;i++){
    document.write("<SPAN id=\"enemy" + i + "\" style=\"position:absolute; font-size:12px; color:blue\">VV</SPAN>")
}
</SCRIPT>

これで、「enemy0」から「enemy4」の5つのタグが作成されました。
文字列内にダブルクォーテーションを記載する場合、その前にエスケープシーケンスとして\マークの記載を忘れないように注意しましょう。

敵機オブジェクトは、敵が出現するたびに作成、敵が死んだら削除という方法もありますが、今回は最初に画面上に表示させる最大数の5つ分、敵機オブジェクトを作成してしまい、オブジェクトにはlifeというプロパティをもたせて、lifeが1以上（初期値は0）のときだけ移動するようなつくりにしました。
また、lifeが0のときは乱数を発生させ、その値によって敵を出現（初期位置を指定してlifeを設定）させています。
敵は移動するとlifeが1づつ減り、lifeが0になったらまた画面から消えます。

この繰り返しで、敵が出現⇒移動⇒消去を繰り返します。

//敵機クラス定義
function enemy(no, sx) {
    this.x = sx;
    this.y = -15;
    this.no = no;
    this.life = 0;
    this.ptn = 0;
    this.move = enemyMove;
}

//敵機移動メソッド
function enemyMove(){
    var ax, ay, text
    if(this.life>0){  //生きているときの処理
        //敵の動き定義
        switch(this.ptn){
        case 0:
            ax=1;
            ay=4;
            break;
        case 1:
            ax=0;
            ay=6;
            break;
        case 2:
            ax=-1;
            ay=4;
            break;
        }

        //座標計算
        this.x+=ax;
        this.y+=ay;
        this.life--;

    } else {  //死んでいるときの処理
        this.y = -15;

        //敵発生（ランダム）
        var eck = Math.floor(Math.random() * 100);
        if(eck<1){
            this.x=Math.floor(Math.random() * 400);
            this.life=80;
            this.ptn=Math.floor(Math.random() * 3);
        }
    }

    //表示
    text="enemy" + this.no;
    document.all.item(text).style.left=this.x;
    document.all.item(text).style.top=this.y;
}

何度か出現している、Math.floor(Math.random() * XXX)という書式はJavaScriptで乱数を発生させる常套句です。

Math.random()

は、0以上1未満の乱数を発生させる関数です。
この値に適当な値XXXを掛け算し、

Math.floor()

によって小数点以下をカットすることで、0以上XXX未満の整数の乱数を得ることが出来ます。

敵の移動パターンは3パターン用意し、敵出現時にどの移動パターンをとるか乱数で決定しています。
上記クラスを実装させることで、画面上に敵が出現する合間を自機を操縦するという、シューティングゲームの基礎の基礎が出来てきました。

//敵機オブジェクト作成
emplain=new Array(5);
for(i=0;i<5;i++){
    emplain[i] = new enemy(i, 0);
}

が、残念乍ら当たり判定が出来ていません。敵に当たっても何事もなく素通りしますが、この辺はまた後日。

[sample-b] [DL]

[top] [index]