第29回【シューティング制作.9】


まずは動画を見てくださいね!
JavaScriptでシューティング制作です!
今回は自機弾の当たり判定をやってます。ゲームプログラミングでは当たり判定も大事なところで、矩形同士の判定と、円同士の判定を解説しています。

弾クラスで当たり判定

jiki.js
	update()
	{
		super.update();
		
		for( let i=0; i<teki.length ;i++)
		{
			if( !teki[i].kill )
			{
				
				if( checkHit(
				
					this.x, this.y, this.w, this.h,
					teki[i].x, teki[i].y, teki[i].w, teki[i].h
				
				) )
				{
					teki[i].kill=true;
					this.kill=true;
					break;
				}
				
			}
		}
	}
弾それぞれで敵に当たってるかチェックしますので、弾クラスのupdateメソッドにループを組みます。
checkHitでtrueが返って来た時は当たったとして、敵、弾ともにkillフラグをtrueにします。
jiki.js/Tamaクラス

		this.w = 4;
		this.h = 6;

teki.js/Tekiクラス

		this.w = 20;
		this.h = 20;
矩形で判定するのに必要なため、弾クラス、敵クラスともにコンストラクタでサイズのプロパティを持ちました。

矩形での当たり判定


矩形同士の当たり判定は、四角1と四角2の四隅で判定します。
Left1とLeft2を比較した場合、Left2の方が大きくても小さくても当たってる可能性があります。
なので、Left1とRight2で比較し、Right2が大きかった時だけ当たる可能性があります。
Left1<=Right2の関係の時に、Right1とLeft2を比較すると、Right1よりLeft2が小さい時だけ重なってるのが解ります。
同様に上下、Top1とBottom2で比較、Bottom2とTop2で比較します。
	let left1   = x1>>8;
	let right1  = left1+w1;
	let top1    = y1>>8;
	let bottom1 = top1 +h1;
	
	let left2   = x2>>8;
	let right2  = left2+w2;
	let top2    = y2>>8;
	let bottom2 = top2 +h2;
	
	return( left1 <= right2  &&
		   right1 >= left2   &&
			 top1 <= bottom2 &&
		  bottom1 >= top2      );
図と同じになるように、一時的に変数に移しました。
これで矩形の当たり判定は大丈夫そうです。


円同士の当たり判定


円同士の当たり判定にはピタゴラスの定理(三平方の定理)を使います。
直角三角形の底辺(a)と高さ(b)はそれぞれの座標から求まります。
a辺、b辺がわかれば c2 = a2 + b2(2は2乗)の関係からcが求まります。
斜辺の長さは√a2+b2です。
Math.sqrt(a*a+b*b)がcの長さですので、これとそれぞれの半径を足した数を比較します。
斜辺より半径の合計が大きい場合は当たりです。
ただ、Math.sqrt()を使うよりも、c2をそのまま使って、rの合計の2乗と比較します。
こちらの方が処理が高速なため。
//当たり判定
function checkHit( x1,y1,r1,  x2,y2,r2 )
{
	// 円同士の当たり判定
	let a = (x2-x1)>>8;
	let b = (y2-y1)>>8;
	let r = r1+r2;
	
	return r*r >= a*a + b*b ;
}

理屈さえ解ってしまえばとても簡単です!

続く・・・



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