HTML5とJavaScriptで、簡単なシューティングゲームを作ってみます。

シューティングゲームといっても地形の変化するステージやボスなどはなく、適当に出現させた敵を弾丸で攻撃するタイプのものです。背景は、黒一色。自機や敵は、16*16ピクセルのグラフィック(HTML5のCanvasに描画するImageData)にしましょう。

とりあえず、今回は240*240ピクセルのCanvasをゲーム画面としてゲーム画面上で自機を移動しながら弾丸を発射できるようにしてみます。

自機のグラフィックは、JavaScriptの配列でグラフィックパターンと色付け用のカラーテーブルを作成し、ImageDataにピクセルの色情報を設定する形にしてみました。

// 自機グラフィック
var jssht1_chr_img;

// 自機グラフィックパターン
var chr_ptn = new Array();

chr_ptn[0]  = "0000000000000000";
chr_ptn[1]  = "0000002222000000";
chr_ptn[2]  = "0000222222220000";
chr_ptn[3]  = "0000222222220000";
chr_ptn[4]  = "0002222222222000";
chr_ptn[5]  = "0002222222222000";
chr_ptn[6]  = "0022222222222200";
chr_ptn[7]  = "0022222222222200";
chr_ptn[8]  = "0222222222222220";
chr_ptn[9]  = "0222222222222220";
chr_ptn[10] = "0022222222222200";
chr_ptn[11] = "0022222222222200";
chr_ptn[12] = "0022222222222200";
chr_ptn[13] = "0002222222222000";
chr_ptn[14] = "0022222222222200";
chr_ptn[15] = "0001100000011000";

var chr_colors = new Array();

// 自機色設定用カラーテーブル
chr_colors[0] = 0x00000000;
chr_colors[1] = 0xffa00000;
chr_colors[2] = 0xff00a0ff;

// 自機グラフィックImageData作成
jssht1_chr_img = jssht1_context.createImageData(16, 16);

// 自機のImageDataにピクセル列を設定
for(i = 0;i < 16;i++) {
	for (j = 0;j < 16;j++) {

		// (j, i)に設定するARGB値
		var v = chr_colors[chr_ptn[i].charAt(j)];

		// (j, i)のデータ先頭位置
		var index = (j + (i * 16)) * 4;

		// (j, i)の色情報を設定
		jssht1_chr_img.data[index] = ((v >> 16) & 0xff);
		jssht1_chr_img.data[index + 1] = ((v >> 8) & 0xff);
		jssht1_chr_img.data[index + 2] = v & 0xff;
		jssht1_chr_img.data[index + 3] = ((v >> 24) & 0xff);

	}
}

この自機を、キー状態で更新する現在位置の変数jssht1_chr_x/jssht1_chr_yに合わせて描画します。グラフィックパターンは縦方向ですから、いわゆる縦型シューティングゲームということになるのでしょうか。

弾丸の方は、特にグラフィックパターンは用意せず「弾丸の位置に2*2ピクセルの灰色正方形を描く」形で表現しましょう。弾丸は、位置を記録する弾丸オブジェクトを配列に格納して管理します。

メインループ内でスペースキーの状態を監視し、スペースキーが押されていたら自機のすぐ上の位置に弾丸を配列に追加、配列内の弾丸は毎回上方向に移動して画面外(Y座標が0未満)に出たら、削除するようにしてみました。

// 発射済み弾丸の位置を更新
for (i = 0;i < jssht1_bulletList.length;i++) {
	jssht1_bulletList[i].y -= 8;
}

// 画面外に出た弾丸を配列から削除
while (jssht1_bulletList.length > 0 && jssht1_bulletList[0].y < 0) {
	jssht1_bulletList.shift();
}

// スペース押下中(弾丸発射)
if (jssht1_trigger == 1) {

	// 弾丸オブジェクト作成
	var obj = new Object();
	obj.x = jssht1_chr_x + 8;
	obj.y = jssht1_chr_y - 1;

	// 発射済み弾丸配列に追加
	jssht1_bulletList.push(obj);

}

このようにして管理している自機や弾丸は、描画処理でクリアしたCanvasに順次描いていきます。今回程度のグラフィック処理なら、HTML5(Canvas)でなくてもできなくはないんですけどね……

実行画面は、以下になります。フォーカス管理を簡略化するためにobjectタグで埋め込む(シューティングゲーム本体を一つのHTMLファイルとし、JavaScriptのキーイベントはページ全体を対象に設定)形になっているので、黒い画面をクリックしてからカーソルやスペースキーで操作してみてください。

HTMLファイル

今回のメインループは30msのウエイトを入れて繰り返す形にしておきましたが、弾丸の処理速度も特に問題ない感じですね。


創作プログラミングの街 > ゲーム開発室 > Webゲーム開発室