レーザーの表現は、昔は細い線一本でしたが、今では極太レーザーやホーミングでクネクネするものなど、いろいろあります。
どうせ作るなら一本線だとつまらないので、ホーミングレーザーを作ってみます。

まずはホーミング弾を

作成します。 移動速度と方向を極座標として持たせ、自機との角度によって移動方向を補正します。
これで徐々に自機の方に近づいていくホーミング弾ができます。

var ax = this.x - this.previous.x;
var ay = this.y - this.previous.y;
var bx1 = myShip.x - this.previous.x;
var bx2 = myShip.x + WIDTH - this.previous.x;
var bx3 = myShip.x - WIDTH - this.previous.x;
var bx;
if (Math.abs(bx1) < Math.abs(bx2))
{
	if (Math.abs(bx1) < Math.abs(bx3))
		bx = bx1;
	else
		bx = bx3;
}
else
{
	if (Math.abs(bx2) < Math.abs(bx3))
		bx = bx2;
	else
		bx = bx3;
}
var by = myShip.y - this.previous.y;
var ep = ax * by - bx * ay;
if (0 < ep)
	this.theta += 0.1;
else
	this.theta -= 0.1;

直交座標での右端と左端は繋がっているので、ちょっとソースが長くなっていますが、ようするに進もうとしている方向よりも右側だったら、右に曲がるように、左側だったら左に曲がるようにしているだけです。

レーザーっぽくするには

過去の位置を保存しておいてそれをつなぎます。
今回は10点分記録しておくようにしました。
ちゃんとしたゲームでは各点にそって画像をコピーしますが、処理速度的に厳しいので今回は直線で結びました。
これでも雰囲気は出ていると思います。

まとめると

以下のようになりました。

var EnemyHomingLaser = function (x, y)
{
	this.move = function ()
	{
		this.x = (this.x + this.speed * Math.cos(this.theta) + WIDTH) % WIDTH;
		this.y += this.speed * Math.sin(this.theta);

		if (this.y < HEIGHT * 3 / 4)
		{
			var ax = this.x - this.pos[this.pos.length - 1][0];
			var ay = this.y - this.pos[this.pos.length - 1][1];
			var bx1 = myShip.x - this.pos[this.pos.length - 1][0];
			var bx2 = myShip.x + WIDTH - this.pos[this.pos.length - 1][0];
			var bx3 = myShip.x - WIDTH - this.pos[this.pos.length - 1][0];
			var bx;
			if (Math.abs(bx1) < Math.abs(bx2))
			{
				if (Math.abs(bx1) < Math.abs(bx3))
					bx = bx1;
				else
					bx = bx3;
			}
			else
			{
				if (Math.abs(bx2) < Math.abs(bx3))
					bx = bx2;
				else
					bx = bx3;
			}
			var by = myShip.y - this.pos[this.pos.length - 1][1];
			var ep = ax * by - bx * ay;
			if (0 < ep)
				this.theta += 0.1;
			else
				this.theta -= 0.1;
		}

		this.speed += 0.2;
		
		this.pos.push([this.x, this.y]);
		if (10 < this.pos.length) this.pos.shift();

		var out = true;
		for (var n = 0; n < this.pos.length; n++)
		{
			if (this.pos[n][1] < HEIGHT + 5) out = false;
		}
		if (out) return false;
		return true;
	}

	this.drawPolar = function (ctx)
	{
		var offset = 0;
	
		ctx.save();
		ctx.beginPath();
		ctx.moveTo(this.pos[0][0], this.pos[0][1]);
		for (var n = 1; n < this.pos.length; n++)
		{
			if (WIDTH / 2 < Math.abs(this.pos[n][0] - this.pos[n - 1][0]))
				offset = this.pos[n][0] < this.pos[n - 1][0] ? WIDTH : -WIDTH;
			ctx.lineTo(offset + this.pos[n][0], this.pos[n][1]);
		}
		ctx.strokeStyle = "rgb(192, 0, 128)";
		ctx.lineWidth = 4;
		ctx.lineCap = "round";
		ctx.stroke();

		ctx.strokeStyle = "rgb(255, 192, 255)";
		ctx.lineWidth = 2;
		ctx.stroke();
		ctx.restore();
	}
	
	this.initialize(x, y, 2);

	this.speed = 1;
	this.theta = Math.PI / 2 * 3;
	this.pos = [[x, y]];
}
EnemyHomingLaser.prototype = new BaseObject();

自機にある程度近づいても追尾すると絶対によけられないので、直交座標上で画面の3/4になるまで追尾するようにしています。

Play

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

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

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

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

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

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();
	}
}

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;
	}
}

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

Play

ちょっと方向性を変えてみました。
いままでHTMLを手打ちで作っていましたが、シーン数を多くしようと思うとやってられません。
単純で同じパターンの繰り返しのHTMLなので、設定ファイルを作って、そこから自動生成させた方がはるかに楽です。
どうせならオンラインで動いたほうが面白いので、設定ファイルはjson、自動生成プログラムはphpで作りました。

必要最低限の情報を記したjsonファイルを作って、それをphpに食わせるとhtmlを作ります。

Play

もうちょっと体裁を整えれば、クリックゲーム作成ツールになるかな（笑

ゲームを作るうえで重要なことは、プレーヤーの作業に対して見返りを与えるということだと思います。
別に金銭的な見返りというわけではありません。
RPGならモンスターを倒すという作業を行えば、経験値、アイテムなどがもらえますね、それが見返りです。
シューティングでもいろいろあると思いますが、最も初歩的なところ「敵を倒したぞ！！」という印象・達成感？を与えるために、爆発アニメーションを作ります。

爆発もクラスにして、敵が消去されるときに敵がいた位置に作成します。
見返りなので、もっとディテールにこだわる必要があると思いますが、今回はarcにグラデーションで適当に色をつけただけにしました(^^;

var Explosion = function (x, y)
{
	var sx, sy;
	sy = Math.sqrt((HEIGHT - y - 1) / HEIGHT);
	sy = r - sy * r;
	this.coeff = Math.abs(sy / HEIGHT);
	
	sx = sy * Math.cos(x * Math.PI * 2 / WIDTH + Math.PI) + hw;
	sy = sy * Math.sin(x * Math.PI * 2 / WIDTH + Math.PI) + hh;

	this.x = sx;
	this.y = sy;
	
	this.count = 0;

	this.limit = 10;

	this.move = function ()
	{
		if (this.limit < ++this.count) return false;
		return true;
	}

	this.draw = function (ctx)
	{
		var radius = (140 - (this.limit - this.count) * (this.limit - this.count) * 140 / (this.limit * this.limit)) * this.coeff;
		var alpha = 1;
		if (this.limit - 4 <= this.count)
			alpha = (this.limit - this.count) / 4;
	
		ctx.save();
		ctx.translate(this.x, this.y);
		ctx.beginPath();
		ctx.arc(0, 0, radius, 0, Math.PI * 2, false)
		var grad  = ctx.createRadialGradient(0, 0, 0, 0, 0, radius);
		grad.addColorStop(0, "rgba(255, 255, 255," + alpha + ")");
		grad.addColorStop(0.5, "rgba(255, 255, 255," + alpha + ")");
		grad.addColorStop(0.8, "rgba(255, 255, 0," + alpha + ")");
		grad.addColorStop(1, "rgba(255, 0, 0," + alpha + ")");
		ctx.fillStyle = grad;
		ctx.fill();
		ctx.restore();
	}
}

Play

演出ついでに、自機弾を発射したときにエフェクトをつけました。
あまり目立ちませんが、ないよりはましでしょう。

var Spark = function (x, y)
{
	this.x = x;
	this.y = y;
	this.count = 0;

	this.move = function ()
	{
		if (1 < ++this.count) return false;
		return true;
	}
	
	this.draw = function (ctx)
	{
		ctx.save();
		ctx.beginPath();
		ctx.translate(this.x, this.y);
		ctx.moveTo(0, 0);
		ctx.lineTo(-9, 1);
		ctx.lineTo(-4, -1);
		ctx.lineTo(-10, -3);
		ctx.lineTo(-4, -3);
		ctx.lineTo(-10, -7);
		ctx.lineTo(0, -4);
		ctx.lineTo(9, -7);
		ctx.lineTo(4, -3);
		ctx.lineTo(11, -3);
		ctx.lineTo(5, -1);
		ctx.lineTo(10, 1);
		ctx.fillStyle = "rgb(255, 128, 128)";
		ctx.fill();
		ctx.restore();
	}
}

Play