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

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

今回はCanvasとは関係しない、ゲーム作りに関する部分を作ろうと思います。

まず、自機の操作方法ですが、すごく簡単なつくりにしようと思います。
決して手抜きではありません。!!
マウスボタンが押されていないとき自機は常に左方向に移動し続け、マウスボタンが押されると右方向に移動することにします。
canvas003.png

マウスボタンを検出するコードはこれまた簡単に以下のような感じ。

var button = false;
canvas.onmousedown = function ()
{
	button = true;
}

canvas.onmouseup = function ()
{
	button = false;
}
マウスボタンが押されたら、buttonをtrueにして、はなされたらfalseにします。
これでbutton変数を参照すればマウスボタンが押されているかがわかります。

自機の移動、描画は1つのクラスにまとめます。

var MyShip = function ()
{
	this.x = WIDTH / 2;
	this.y = HEIGHT * 9 / 10;
	
	this.move = function ()
	{
		this.x = (this.x + 4 * (button ? 1 : -1) + WIDTH) % WIDTH;
	}
	
	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, 64, 255)";
		ctx.fill();
		ctx.restore();
	}
}
今回は自機のy座標はあまり重要ではありませんが、とりあえず変数にしておきました。
初期座標は画面中央下側で、buttonがtrueなら現在のx座標時に4を加算、falseなら4を減算します。
描画はtranslateと言うCanvas関数を使っています。
あ、一応Canvaと関係しましたね(^^;
translateはパスを作成する際の座標にtranslateで指定した値を加算して作成します。
要するに原点を指定した座標に移動すると言うことですね。
このtranslateはbeginPathではリセットされませんので、最初にsaveで現在のCanvasの状態を保存し、描画し終わった後resotreでsave以降に設定したtranslateをリセットします。

あとはこの自機のmoveとdrawをメインループから呼び出します。

setInterval(function ()
	{
		myShip.move();
		
		ctx.beginPath();
		ctx.clearRect(0, 0, WIDTH, HEIGHT);
		myShip.draw(ctx);
		
	}, 1000 / 30);
約1秒当たり30フレームのフレームレートにしていますが、Javascriptではそこまで厳密なフレームレートは期待できません。
手を加えれば多少良くなると思いますが、そこまでする必要はないと思っています。

これで自機の移動は出来上がりです。

Demo

トラックバック(0)

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

コメントする

オリジナルゲーム

オンラインツール