第30回【シューティング制作.10】


まずは動画を見てくださいね!
JavaScriptでシューティング制作です!
完全にゲームプログラミング講座になってますが・・・
前回作った当たり判定を使って敵弾と自機の判定もします。
爆発エフェクト作りがメインかも?

敵弾クラスに当たり判定を追加

何も書いてなかった敵弾Tetaクラスの中身を追加します。
//敵弾クラス
class Teta extends CharaBase
{
	constructor(sn,x,y,vx,vy)
	{
		super(sn,x,y,vx,vy);
		this.r = 4;
	}
	
	update()
	{
		super.update();
		
		if(!jiki.damage && checkHit(this.x, this.y, this.r,
					jiki.x, jiki.y, jiki.r) )
		{
			this.kill   =true;
			jiki.damage = 10;
		}
		
	}
}
updateメソッドで、前回作ったcheckHit関数を呼びます。
今回はteki[]ではなくjikiでチェックします。
コンストラクタで半径を作ってます。
ヒットした時はjiki.damageに10を入れる事にしました。

jiki.js/ Jikiクラス
...
		this.r      = 10;
		this.damage = 0;
...
自機クラスに半径とダメージのプロパティを追加しました。

main.js/ drawAll関数

... vcon.fillStyle=(jiki.damage)?"red":"black"; ...
jiki.damageがあるときは背景を赤でクリアするように変更。
これで敵弾と自機がぶつかった時に赤く光るようになりました。


teki.js/ Tekiクラス
	...
	if(!jiki.damage && checkHit(this.x, this.y, this.r,
			jiki.x, jiki.y, jiki.r) )
	{
		this.kill   =true;
		jiki.damage = 10;
	}
	...
敵弾の当たり判定とまったく同じものをコピーしてTekiクラスのupdateメソッドの最後に貼り付けました。
これで敵と自機があたった時の判定をします。


爆発エフェクト

敵を倒した時に爆発するように爆発クラスを作ります。
動画とは順番が違いますが、先にCharaBaseクラスにカウンタを作っておきます。
misc.js/CharaBaseクラス
constructor
	...
	this.count = 0;
	...
update
	...
	this.count++;
	...
コンストラクタにカウントプロパティを持ちupdateメソッドでインクリメントするだけです。

misc.js/Explクラス
//爆発のクラス
class Expl extends CharaBase
{
	draw()
	{
		this.sn = 16 + (this.count>>2);
		if( this.sn==27 )
		{
			this.kill = true;
			return;
		}
		super.draw();
	}
}
新しくExplクラスを作り、drawメソッドだけ手直しします。
スプライト番号を16から26までにしました。
27になったら終了です。

これで地味ながらもヒヨコが爆発するようになりました。


もっと派手に爆発

forループで爆発を数回行うようにして爆発を派手にします。
//もっと派手な爆発
function explosion( x,y, vx,vy )
{
	expl.push( new Expl( 0,x,y,vx,vy ) );
	for(let i=0;i<10;i++)
	{
		let evx = vx+(rand(-10,10)<<6);
		let evy = vy+(rand(-10,10)<<6);
		expl.push( new Expl( i,x,y,evx,evy ) );
	}
}
爆発関数explosionを作成、座標と移動ベクトルを受け取ります。
散らばる様にベクトルにランダムで修正を入れています。

また、爆発クラスには時限タイマーをもたせています。
//爆発のクラス
class Expl extends CharaBase
{
	constructor( c,x,y,vx,vy )
	{
		super(0,x,y,vx,vy);
		this.timer = c;
	}
	update()
	{
		if(this.timer)
		{
			this.timer--;
			return;
		}
		super.update();
	}
	draw()
	{
		if(this.timer)return;
		this.sn = 16 + (this.count>>2);
		if( this.sn==27 )
		{
			this.kill = true;
			return;
		}
		super.draw();
	}
}
タイマーが0になるまで始まらないクラスにしました。
これで、爆発一つずつ少し遅れが出るようにしています。

とりあえず、これで派手になりました!
次回に続く・・・




akichon/あきちょん
Youtubeでプログラミング講座やってるゲーム好きの(元?)プログラマ...
>>open profile...
■Twitter始めました
https://twitter.com/ak1chon
■Youtubeチャンネルはこちら
akichon(Youtube)