JavaScript Maniax

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

当たり判定を作成します。
さて、折角敵味方が入り混じって画面中を駆け回るようになったのですから、当たり判定を付けてみましょう。当たり判定とはつまり、敵と自分や、まだ作っていないですが自分が撃った弾と敵、敵が撃った弾と自分、その他障害物など諸々との衝突を検出するプログラムです。
敵の位置と自分の位置はそれぞれ座標を持っているわけですから、その座標の距離から判断することが出来ます。本来はキャラクタの大きさなども考慮すべきですが、今回は全部同じ大きさでつくっていますから、座標だけから計測します。
2点間の距離は、x軸上の距離の2乗とy軸上の距離の2乗の平方根で求めることが出来ますから、2点間の距離を求める関数は以下の様に記述できます。
function dist(ax, ay, bx, by, dv){
    var x, y, z, r;
    x=(ax-bx)*(ax-bx);
    y=(ay-by)*(ay-by);
    z=dv*dv;
    if ((x+y)<z){
        r=true;
    }else {
        r=false;
    }
    return r;
}
オブジェクト1の座標(ax,ay)、オブジェクト2の座標(bx,by)、衝突距離dvを引数として渡し、2つのオブジェクトの距離が衝突距離よりも短ければ衝突ということでtrueを返し、それ以外であればfalseを返す関数です。

これを敵の数だけcallする必要がありますから、以下の記述で衝突を検出することができます。
for(i=0;i<20;i++){
    if(emplain[i].life>0){
        if(dist(emplain[i].x, emplain[i].y, myplain.x, myplain.y, 10)){
            //衝突!!
        }
    }
}
敵と衝突すると、myplainオブジェクトのlifeを0にし、window.Timeoutを実行しないようにしました。これによって敵と衝突すると画面の動きが全てとまります。
本来であればここにミスしたときの画面やゲームオーバーの画面などを作成するとよいのですが、とりあえずこの方法でゲームオーバーになるようにしました。
これだけではなんなので、敵クラスをまねして弾クラスも作成しました。
スペースキーを押すことで弾を発射できます。
プログラム上特に目新しいことをやっているわけではないので、ソースを参照してみてください。

[
sample-a] [DL]



応用編

さて実際に上記サンプルを動かしてみると、敵が画面下部にくるとボタンを押したタイミングで画面がスクロールしてしまったりして非常に見づらいことになってしまいました。
これを回避する方法に、モーダルダイアログがあります。
ダイアログとしてHTML画面を開く方法で、以下の記述で開くことが出来ます。
showModalDialog(ファイル名, null, オプション);
実はこの画面に上記関数が組み込まれています。
モーダルダイアログを使用して、先ほどのsampleを呼び出してみましょう。

[sample-a with modalDialog]

ぐっとゲームっぽくなりました。
画面サイズが固定されたので、自機の移動範囲を制限するなどの工夫をするともっとゲームらしくなります。

さらにタイトル画面やゲームオーバー画面、死亡時の爆発パターンや得点などつけてみたのが下記Sampleです。
コメントを多くつけてありますのでソースを参照してみてください。

ひとまず今回で、JavaScriptをつかったシューティングゲームの作成方法は終わりとさせて頂きたいと思います。


[sample-b] [DL]
[top] [index]
トップメニュー 基礎編 実践編 外部リンク