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

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

今回はシューティングに必要不可欠な自機弾と敵を作ります。
自機弾はオート連射、敵は上から下に突進するという仕様で作りたいと思います。

まずは自機弾クラス

var MyShot = function (x, y)
{
	this.x = x;
	this.y = y;
	
	this.move = function ()
	{
		this.y -= 10;
		if (this.y < -20) return false;
		return true;
	}
	
	this.draw = function (ctx)
	{
		ctx.save();
		ctx.beginPath();
		ctx.translate(this.x, this.y);
		ctx.moveTo(0, -6);
		ctx.lineTo(0, 6);
		ctx.strokeStyle = "rgb(255, 0, 0)";
		ctx.lineWidth = 4;
		ctx.lineCap = "round";
		ctx.stroke();
		ctx.restore();
	}
}

オブジェクト作成時に、x、y座標を自機クラスから指定されます。
move関数でy座標を減算し、-20よりも小さくなったらfalseを返し、それ以外ではtureを返すようにしています。
この戻り値により、move関数呼び出し側でtrueならそのまま、falseならオブジェクトを削除すると判断します。

drawで弾を描画しますが、今回はfillではなくstrokeで描いてみました。
strokeはパスの輪郭を描く関数です。
関連するプロパティは主に以下のとおりです。

strokeStyle
fillStyleと同様、色を指定
lineWidth
線の幅を指定
lineCap
線の端の形状を指定。指定できるのは以下の3つ
butt
始点から終点までの矩形、デフォルト
round
線端に線幅半分の半円を付加
square
線端に線幅半分の矩形を付加
lineJoin
パスの連結形状を指定。指定できるのは以下の3つ
bevel
パスとパスの間を平坦につなぐ
round
パスとパスの間と円弧でつなぐ
miter
パスとパスの間を尖らしてつなぐ
今回は「strokeStyle」と「lineWidth」、「lineCap」を使い、単純な一本線ですが、それっぽく見えていると思います。

ゲーム作りで重要な要素のひとつにオブジェクトの管理があります。
オブジェクトの管理とは作成、更新、削除です。
これらを確実に行わないと思わぬバグの原因になるので要注意。
今回はこれを比較的簡単に扱えるよう配列で行うようにしました。

var myShots = [];
また、移動用の関数と描画用の関数を用意します。
var moveObjs = function (objs)
{
	for (var n = 0; n < objs.length; n++)
	{
		if (!objs[n].move())
		{
			objs.splice(n, 1);
			n--;
		}
	}
}

var drawObjs = function (objs, ctx)
{
	for (var n = 0; n < objs.length; n++)
	{
		objs[n].draw(ctx);
	}
}
これらの関数はそれぞれ「moveObjs(myShots)」、「drawObjs(myShots)」という感じで使用します。
moveではオブジェクトのmove関数がfalseを返してきたら配列から削除します。

自機弾の生成は自機クラスから行いたいので、自機クラスにカウンタを追加し、move関数を変更しました。

this.count = 0;

this.move = function ()
{
	this.x = (this.x + 4 * (button ? 1 : -1) + WIDTH) % WIDTH;
	
	if (--this.count < 0)
	{
		this.count = 5;
		myShots.push(new MyShot(this.x, this.y - 5));
	}
}

次に敵のクラスです。

var Enemy = function ()
{
	this.x = Math.random() * WIDTH;
	this.y = -20;
	
	this.move = function ()
	{
		this.y += 5;
		if (HEIGHT + 20 < this.y) return false;
		return true;
	}
	
	this.draw = function (ctx)
	{
		ctx.save();
		ctx.beginPath();
		ctx.translate(this.x, this.y);
		ctx.moveTo(0, 10);
		ctx.lineTo(-10, -10);
		ctx.lineTo(10, -10);
		ctx.fillStyle = "rgb(64, 255, 64)";
		ctx.fill();
		ctx.restore();
	}
}

x座標はランダムで設定します。
move関数で5ずつ加算し、画面外に出たらfalseを返します。
描画は自機同様三角を描画しています。

また、敵オブジェクト管理用配列を用意しました。

var enemies = [];
敵の生成はとりあえずメインループで行っていますが、今後変更する予定です。

Demo

次回は自機弾と敵の衝突判定でも追加しようかな。

トラックバック(0)

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

コメントする

オリジナルゲーム

オンラインツール