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

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

だいぶゲームらしくなってきましたが、何か忘れている気がします。
弾幕シューティングにしようと思っていたのに、敵の弾がない!!

早速、作りました。

var EnemyShot = function (x, y, theta)
{
	this.x = x;
	this.y = y;
	this.radius = 3;
	this.speed = 6;
	this.theta = theta;
	this.count = 0;
	
	this.move = function ()
	{
		this.count++;
		this.x = (this.x + this.speed * Math.cos(this.theta) + WIDTH) % WIDTH;
		this.y += this.speed * Math.sin(this.theta);
		if (HEIGHT + 20 < this.y) return false;
		return true;
	}
	
	this.draw = function (ctx)
	{
		ctx.save();
		ctx.beginPath();
		ctx.translate(this.x, this.y);
		ctx.rotate(this.count);
		ctx.moveTo(0, -2);
		ctx.lineTo(0, 2);
		ctx.strokeStyle = "rgb(255, 64, 255)";
		ctx.lineWidth = 6;
		ctx.lineCap = "round";
		ctx.stroke();
		ctx.restore();
	}
}

自機弾と同様strokeで描いていますが、さらにrotateを使って回転させてみました。

rotate(angle)
左上を基準に時計回りに回転
移動増分は前回ちょっと触れたとおり、極座標で保持しています。
普通のシューティングでは画面横端に行ったら消滅しますが、極座標では右端と左端はつながっているので、x座標の計算に細工がしてあります。

敵クラスから敵弾を作成し、その際に自機との位置関係から角度を与えるようにしました。

this.move = function ()
{
	if (this.y < HEIGHT / 2 && !parseInt(Math.random() * 20))
	{
		var theta;
		if (this.x < myShip.x)
		{
			if (myShip.x - this.x < this.x + WIDTH - myShip.x)
				theta = Math.atan2(myShip.y - this.y, myShip.x - this.x);
			else
				theta = Math.atan2(myShip.y - this.y, myShip.x - this.x - WIDTH);
		}
		else
		{
			if (this.x - myShip.x < myShip.x + WIDTH - this.x)
				theta = Math.atan2(myShip.y - this.y, myShip.x - this.x);
			else
				theta = Math.atan2(myShip.y - this.y, myShip.x + WIDTH - this.x);
		}
		enemyShots.push(new EnemyShot(this.x, this.y, theta));
	}

	this.y += 5;
	if (HEIGHT + 20 < this.y) return false;
	return true;
}
これも画面両端がつながっているので、その分コードが長くなってしまいました。

8.png
Play

トラックバック(0)

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

コメントする

オリジナルゲーム

オンラインツール