ゲーム製作でHTML5-Canvasを勉強するぞ!! 第11回

| コメント(0) | トラックバック(0)

そろそろ自機にもあたり判定を

自機がダメージを受けた場合の効果としては、爆発して機数が減ったり、体力が減ったりいろいろなパターンがあります。
今回は後者の体力が減るパターンにしたいと思います。

あたり判定の処理そのものは敵と自弾の時と同じ

ちょっと違うのは自機のあたり判定の範囲を少し小さめにするということです。
特に弾幕シューティングで多くなりますが、ぎりぎりでよけたはずなのにダメージを受けたというと、プレーヤーにとってストレスです。
逆に少しかすったように見えてもダメージを受けなければ、特に気にはされません。
最近のゲームでは自機の絵に比べてはるかにあたり判定が小さいこともあります。
まあ、今回のは極座標系なので自機の範囲とか良くわからないですけどね(^^;

ダメージを受けたら体力を減らす

現在の体力を知るために体力メーターが必要ですね。
体力メーターは単に現在の状態を表すだけではなく、増減時にちょっとしたアニメーションをさせてみました。
ちょっとしたことですが、なんとなく完成度が高いような気になれます。

this.drawNormal = function (ctx)
{
	var bar = function (ctx, x, y, w)
	{
		ctx.moveTo(x, y);
		ctx.lineTo(x + w, y);
		ctx.arcTo(x + w + 5, y + 5, x + w, y + 10, 5);
		ctx.lineTo(x + w, y + 10);
		ctx.lineTo(x, y + 10);
		ctx.arcTo(x - 5, y + 5, x, y, 5);
		ctx.closePath();
	}

	ctx.beginPath();
	ctx.drawImage(this.image, 0, 0, 20, 20, 191, 8, 14, 14);
	
	if (0 < this.hitPointPre)
	{
		ctx.save()
		ctx.beginPath();
		
		var w;
		if (this.hitPoint < this.hitPointPre)
		{
			w = this.hitPointPre;
			ctx.fillStyle = "rgba(255, 0, 0, 0.8)";
		}
		else
		{
			w = this.hitPoint;
			ctx.fillStyle = "rgba(0, 0, 255, 0.5)";
		}
	
		bar(ctx, 213, 10, w);
		ctx.fill();
		ctx.restore();
	}
	
	if (0 < this.hitPoint)
	{
		ctx.beginPath();

		var w;
		if (this.hitPoint < this.hitPointPre)
			w = this.hitPoint;
		else
			w = this.hitPointPre;

		bar(ctx, 213, 10, w);
		var grad  = ctx.createLinearGradient(0, 10, 0, 20);
		grad.addColorStop(0, "rgb(0, 0, 255)");
		grad.addColorStop(0.4, "rgb(192, 192, 255)");
		grad.addColorStop(1, "rgb(0, 0, 255)");
		ctx.fillStyle = grad;
		ctx.fill();
	}
}

11.png
Play

自機に体力が付いたので、敵にもつけよう

要するに1撃では倒せない敵ですね。
今まで自機はMyShipクラス、敵はEnemyクラスで、それぞれ何の関係性もなく作成していました。
敵の種類を増やすので、その分クラスを増やしますが、共通している部分が多数ありますので、クラスに親子関係を持たせようと思います。
すべてのクラスはBaseObjectをベースにします。
敵はBaseObjectからEnemyクラスに派生し、Enemyクラスからそれぞれの敵を実装したEnemy1クラスとEnemy2クラスに派生します。
派生方法は今回は簡単にprototypeに親クラスをnewするだけにしました。

var BaseObject = function ()
{
	this.initialize = function (x, y, radius)	// 初期化
	{
		this.x = x;
		this.y = y;
		this.radius = radius;
	}

	this.move = function ()				// 移動
	{
		return true;
	}
	
	this.drawPolar = function (ctx)			// 極座標に描画
	{
	}
	
	this.drawNormal = function (ctx)		// 直交座標に描画
	{
	}
	
	this.hit = function (obj)			// 衝突時の処理
	{
		return false;
	}
}

これで簡単に敵の種類を増やせるようになりました。

11a.png
Play

トラックバック(0)

トラックバックURL: http://murakya.net/mt/mt-tb.cgi/34

コメントする

オリジナルゲーム

オンラインツール