■補講　CanvasにRPG（ロールプレイングゲーム）のようなマップを描く
　HTMl5を利用してゲームを作る場合に欠かせないのがCanvasへの描画です。ここではRPG（ロールプレイングゲーム）でよく見られるゲーム画面を描画するプログラムを作ってみましょう。RPGと言っても様々なものがありますが、ここではドラゴンクエストなど歴代のRPGに多く見られた上から俯瞰した（上から見た平面的な）ゲーム（マップ）画面を描画します。画像を工夫することで斜め上空からの俯瞰したマップなども作ることができます。


------------------------------------------------------------------------------------------------
■画像の準備
　RPGの場合、マップが非常に広範囲で巨大なものがほとんどです。これを1枚の画像で処理してしまうことはありません。スマートフォンを無視すればHTML5であれば逆に1枚の画像にしてしまった方が楽というのもあります。ただし、ゲームの場合は地形との当たり判定などがあるため、そのような事はあまり行われないでしょう。
　まず、ゲーム画面の描画に必要な画像を用意します。この画像は32×32ピクセルサイズにします。特にピクセルのサイズは問いませんが、2のn乗にする事が多くあります（これは昔のハード的な都合／制約による所が多くあったためです）。
　ここでは以下の4種類の画像を用意しました。PNG形式でファイル名は0〜3までの数値になっています。

0.png	海・川
1.png	樹木
2.png	地面
3.png	草原


------------------------------------------------------------------------------------------------
■マップデータの作成
　ゲーム制作の場合、手軽にゲーム画面を作成するためのマップエディタが用意されている場合があります（基本的には自作です）。マップエディタがなくても手軽にマップデータを作ることができます。
　どのようにするかというと以下のように配列と文字列でマップを作成するのです（30年ほど前から使われている方法です）。この文字とファイル名を1対1に対応させておけばプログラムで簡単に処理できます。
　また、壁に当たったかどうかなどは、このマップデータを参照するだけですから複雑な判定処理も必要ありません。


var mapData = [
	"11111333322222333333",
	"11133333332222223300",
	"11113331133222333000",
	"11111311130000000000",
	"31133300003313323330",
	"31300033333113323000",
	"00033333331111230000",
	"33333333333333233000",
	"11111133333332300000",
	"11111111111332000000"
];


------------------------------------------------------------------------------------------------
■画面を描画する
　マップデータが用意できたら本書のCanvasの章でも説明したdrawImage()メソッドを使って描画するだけです。まず、マップデータは配列なので配列要素数だけ繰り返します。これが縦方向のマップブロックの数になります。配列要素内には文字列があり、この文字列の長さが横のマップブロックの数になります。
　charAt()メソッドでマップデータを1文字ずつ読み出します。読み出した文字がファイル名に対応していますから拡張子である.pngなどを追加して画像を読み込ませます。
　ここで注意しないといけないのは以下のように無名関数（匿名関数）を使わないと正しく描画されないという事です。これは本書のCanvasの章でも説明しましたが、画像の読み込みは非同期で行われるためです。このようにしないとマップは正しく表示されないのです。


for(var y=0; y<mapData.length; y++){
	for(var x=0; x<mapData[0].length; x++){
		var n = mapData[y].charAt(x);	// 1文字読み出し
		(function(n, x, y){
			var img = new Image();
			img.src = "images/"+n+".png";
			img.onload = function(){
				context.drawImage(this, x*32, y*32);	// マップ画像のサイズは32×32ピクセル
			}
		})(n, x, y);
	}
}


これでRPGのマップを描くプログラムができました。実際のプログラムは以下のようになります。興味がある方は、マップ上をキャラクタが動くようにしてみるのもよいでしょう。頑張ってゲームに仕上げてみるとよい勉強になるはずです。



------------------------------------------------------------------------------------------------
■RPGのようなマップを描くプログラム
------------------------------------------------------------------------------------------------
// マップデータ
var mapData = [
	"11111333322222333333",
	"11133333332222223300",
	"11113331133222333000",
	"11111311130000000000",
	"31133300003313323330",
	"31300033333113323000",
	"00033333331111230000",
	"33333333333333233000",
	"11111133333332300000",
	"11111111111332000000"
];
window.addEventListener("load", function(){
	var canvasObj = document.getElementsByTagName("canvas")[0];
	var context = canvasObj.getContext("2d");
	if (!context){ return; }
	for(var y=0; y<mapData.length; y++){
		for(var x=0; x<mapData[0].length; x++){
			var n = mapData[y].charAt(x);	// 1文字読み出し
			(function(n, x, y){
				var img = new Image();
				img.src = "images/"+n+".png";
				img.onload = function(){
					context.drawImage(this, x*32, y*32);	// マップ画像のサイズは32×32ピクセル
				}
			})(n, x, y);
		}
	}
}, true);