小学生からのプログラミング講座（こうざ）、第１３弾です。

前回はHTML5とCanvasを使って、キャラクターがキーボードの入力（にゅうりょく）で移動（いどう）するところまで、紹介（しょうかい）しました。

さて、今回（こんかい）は迷路（めいろ）ゲームやRPG（アールピージー）などで使える、マップの作り方を紹介したいと思います。

マップを作る前準備（まえじゅんび）

まずはマップを作るための準備（じゅんび）として、画像（がぞう）を用意（ようい）しましょう。

先ほどの画像（がぞう）をgameフォルダのimgフォルダのなかに、map.pngという名前で保存（ほぞん）してください。
他（ほか）のフォルダやファイルは、前回（ぜんかい）とおなじです。

game
├ index.html
├ img/
│ ├ map.png (これ)
│ └ rico.png
└ js/
  └ script.js

map.pngは、左側（ひだりがわ）が床（ゆか）、右側（みぎがわ）が壁（かべ）のマップチップです。USBメモリではありません。

画像（がぞう）を切り取って表示（ひょうじ）してみよう！

先ほどの画像（がぞう）は、左右が床（ゆか）と壁（かべ）で、一枚になってしまっています。
そんなときは、画像（がぞう）のどこからどこまでを表示（ひょうじ）するのかを指定（してい）することができます。

drawImage( image, sx, sy, sw, sh, dx, dy, dw, dh )

sx, syで、画像（がぞう）を読み込む部分（ぶぶん）の、左上（ひだりうえ）の位置（いち）、
sw, shで、画像を読み込む部分（ぶぶん）の、幅（はば）と高（たか）さ、
dx, dyで、画像を表示（ひょうじ）する、左上（ひだりうえ）の位置（いち）、
dw, dhで、画像を表示するときの大きさ、
となります。

実際（じっさい）に使うと、このようになります。

//canvasの設定（せってい）
var canvas = document.getElementById( 'canvas' );

//コンテキストを取得（しゅとく）
var ctx = canvas.getContext( '2d' );

//画像（がぞう）のオブジェクトを作る
var img = new Image();
img.src = 'img/map.png';

//画像（がぞう）を表示（ひょうじ）する
addEventListener('load', function() {
	ctx.drawImage( img, 0, 0, 32, 32, 0, 0, 32, 32 );
	ctx.drawImage( img, 32, 0, 32, 32, 0, 64, 32, 32 );
}, false);

さて、今回はマップを作っていきたいのですが、そのためには新（あたら）しいお願（ねが）い方法（ほうほう）を覚えなければなりません。

配列（はいれつ）と、繰（く）り返（かえ）しです。

配列（はいれつ）を使ってみよう！

配列（はいれつ）とは、変数（へんすう）に添字（そえじ）を使って、いくつも変数があるように扱（あつか）えるものです。

関ジャニのメンバーは現在６人です。
では、メンバーをkanjaniという配列（はいれつ）に覚えておいてもらいましょう。

var kanjani = [ '丸山くん', '大倉くん', '村上くん', '横山くん', '錦戸くん', '安田くん' ];

では、メンバーの中から、りこちゃんの大好きな「錦戸くん」をとりだしてみましょう。
とりだすには、kanjani[4]というように、添字（そえじ）を使います。４というのは、０から数えて４番目に「錦戸くん」のデータがあるからです。

var kanjani = [ '丸山くん', '大倉くん', '村上くん', '横山くん', '錦戸くん', '安田くん' ];
alert ( kanjani[4] );

じっさいにブラウザで見てみると、このようになります。

また、メンバーの人数（にんずう）を見ることもできます。
kanjaniという配列（はいれつ）が、データをいくつ覚えているかを見ればいいので、lengthを使います。

var kanjani = [ '丸山くん', '大倉くん', '村上くん', '横山くん', '錦戸くん', '安田くん' ];
alert ( kanjani.length );

じっさいにブラウザで見てみると、このようになります。

johnnys（ジャニーズ）という配列（はいれつ）をつくり、関ジャニのメンバーとSexy Zoneのメンバーを、２列（れつ）に入力（にゅうりょく）しました。
上に関ジャニのメンバー、下にSexy Zoneのメンバーです。

var johnnys = [ 
	[ '丸山くん', '大倉くん', '村上くん', '横山くん', '錦戸くん', '安田くん' ],
	[ '中島くん', '菊池くん', '佐藤くん', '松島くん', 'マリウスくん' ]
];
alert ( johnnys[1][2] );

りこちゃんの好きな佐藤くんは、上から２番目、０から数えると１番目になります。
さらに左から３番目、０から数えると２番目になります。

なので、「佐藤くん」のデータを取り出したいときは、johnnys[1][2]となります。

じっさいにブラウザで見てみると、このようになります。

繰（く）り返（かえ）しを使ってみよう！

続いて、繰（く）り返（かえ）しについて学んでいきましょう。

for文を使ってみよう！

for文は、一番ポピュラーな繰（く）り返（かえ）しのお願いです。

forのなかで、変数（へんすう）iを宣言（せんげん）します。
i++というのは、１ずつ足していくということです。
なので、iが５より小さい場合（ばあい）は１ずつ足していくことで、５回繰（く）り返（かえ）すという意味（いみ）になります。

for (var i=0; i<5; i++) {
	alert( '5回繰り返すよ！' );
}

while文を使ってみよう！

whileは、条件（じょうけん）がtrue（真）のときに繰（く）り返（かえ）すものです。

var x = 0;
while ( x < 5 ) {
	alert( '5回繰り返すよ！' );
	x++;
}

上の例（れい）では、最初（さいしょ）にxに0を覚えておいてもらい、その数が5よりも小さい場合（ばあい）は繰（く）り返（かえ）すというものです。
x++によって、xを１ずつ増（ふ）やしているので、その数が５になったら繰（く）り返（かえ）しを終了（しゅうりょう）します。

var x = 0;
while ( x === 0 ) {
	alert( 'xは0です' );
}

マップを作ってみよう！

これまでの記事（きじ）と、配列（はいれつ）、繰（く）り返（かえ）しが分かれば、マップも自在（じざい）につくることができます。

プログラミングでマップを表現（ひょうげん）するには、数字（すうじ）を使います。
マップチップの、左側（ひだりがわ）を０、右側（みぎがわ）を１とします。

//canvasの設定（せってい）
var canvas = document.getElementById( 'canvas' );
canvas.width = 640;		//canvasの横幅（よこはば）
canvas.height = 640;	//canvasの縦幅（たてはば）

//コンテキストを取得（しゅとく）
var ctx = canvas.getContext( '2d' );

//マップチップのImageオブジェクトを作る
var mapchip = new Image();
mapchip.src = 'img/map.png';

//マップの作成（さくせい）
var map = [
	[0, 0, 1, 0, 1, 0, 0, 0 ,0 ,1 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,1 ,0],
	[0, 1, 0, 0, 0, 1, 1, 1 ,0 ,1 ,0 ,1 ,1 ,0 ,1 ,1 ,1 ,0 ,1 ,0],
	[0, 0, 1, 1, 0, 0, 0, 1 ,0 ,0 ,0 ,1 ,0 ,0 ,0 ,1 ,0 ,0 ,0 ,0],
	[1, 0, 1, 0, 1, 1, 0, 0 ,0 ,1 ,1 ,1 ,1 ,1 ,0 ,0 ,1 ,0 ,1 ,0],
	[0, 0, 0, 0, 0, 1, 1, 1 ,0 ,1 ,0 ,0 ,0 ,0 ,1 ,1 ,0 ,1 ,1 ,0],
	[0, 1, 1, 1, 0, 0, 0, 0 ,0 ,1 ,0 ,1 ,1 ,1 ,0 ,1 ,0 ,0 ,0 ,0],
	[0, 1, 1, 1, 0, 1, 1, 1 ,1 ,1 ,0 ,1 ,0 ,0 ,0 ,0 ,1 ,1 ,1 ,0],
	[0, 0, 0, 1, 0, 0, 0, 0 ,1 ,0 ,0 ,1 ,0 ,1 ,1 ,0 ,0 ,0 ,1 ,0],
	[1, 1, 0, 1, 1, 1, 1, 1 ,1 ,0 ,1 ,1 ,0 ,0 ,1 ,1 ,1 ,0 ,1 ,1],
	[1, 0, 0, 0, 0, 0, 1, 1 ,0 ,0 ,0 ,0 ,1 ,0 ,1 ,1 ,0 ,0 ,1 ,0],
	[1, 0, 1, 1, 1, 0, 0, 0 ,1 ,0 ,1 ,0 ,0 ,0 ,0 ,0 ,1 ,1 ,0 ,0],
	[1, 0, 1, 0, 1, 1, 1, 0 ,1 ,0 ,1 ,1 ,0 ,1 ,1 ,0 ,0 ,0 ,0 ,1],
	[0, 0, 1, 0, 0, 1, 0, 0 ,1 ,0 ,0 ,1 ,0 ,1 ,0 ,1 ,1 ,1 ,0 ,0],
	[0, 1, 1, 1, 0, 1, 0, 1 ,0 ,0 ,1 ,1 ,0 ,1 ,0 ,1 ,1 ,0 ,1 ,0],
	[0, 0, 0, 1, 0, 1, 0, 0 ,1 ,0 ,1 ,1 ,0 ,1 ,0 ,0 ,0 ,0 ,0 ,0],
	[1, 1, 0, 1, 0, 1, 0, 1 ,1 ,0 ,0 ,1 ,0 ,1 ,1 ,0 ,1 ,1 ,1 ,0],
	[0, 0, 0, 1, 0, 1, 1, 1 ,1 ,1 ,0 ,1 ,0 ,1 ,1 ,0 ,0 ,0 ,1 ,0],
	[0, 1, 1, 1, 0, 1, 0, 0 ,0 ,0 ,0 ,1 ,0 ,0 ,0 ,1 ,1 ,0 ,1 ,1],
	[0, 1, 0, 0, 0, 1, 0, 1 ,1 ,1 ,0 ,0 ,1 ,1 ,0 ,1 ,0 ,0 ,0 ,0],
	[0, 0, 0, 1, 0, 0, 0, 1 ,1 ,1 ,1 ,0 ,0 ,0 ,1 ,1 ,1 ,1 ,1 ,0]
]

//マップチップを表示（ひょうじ）する
addEventListener('load', function() {
	for (var y=0; y<map.length; y++) {
		for (var x=0; x<map[y].length; x++) {
			if ( map[y][x] === 0 ) ctx.drawImage( mapchip, 0, 0, 32, 32, 32*x, 32*y, 32, 32 );
			if ( map[y][x] === 1 ) ctx.drawImage( mapchip, 32, 0, 32, 32, 32*x, 32*y, 32, 32 );
		}
	}
}, false);

１４行目で、mapという配列（はいれつ）を作り、そこにマップを0と1で書いていきます。
実際（じっさい）にマップを表示（ひょうじ）するには、forを使って、数字に該当（がいとう）する画像（がぞう）を表示（ひょうじ）していきます。

３９行目のforでy座標（ざひょう）のぶん繰（く）り返（かえ）し、４０行目のforでx座標（ざひょう）のぶん繰（く）り返（かえ）します。
それぞれ、map.lengthやmap[y].lengthとすることで、yやxにいくつマップチップのデータがあるかが分かります。これで、何回繰（く）り返（かえ）すのかを判断（はんだん）することができます。

４１行目、４２行目で、0か1かどちらの画像（がぞう）かを判断（はんだん）し、表示（ひょうじ）します。
マップチップ一枚（いちまい）の大きさは32pxなので、表示するとき、xやyに32をかけ算してあげることで、実際（じっさい）のマップの場所（ばしょ）になります。

ブラウザで見てみると、このようになります。

まとめ

今回は迷路（めいろ）ゲームやRPGでつかえる、マップの作り方について紹介（しょうかい）しました。
プログラミングでマップを作成（さくせい）するときも、文字（もじ）を使って作っていきます。
ちょっと難（むずか）しいかもしれないのですが、これができればゲーム開発（かいはつ）の幅（はば）がかなり広がります。
ぜひ、挑戦（ちょうせん）してみてください。

この企画の一覧はこちら

1. 小学生から始めるプログラミング入門。プログラミングってなぁに？
2. 小学生から始めるScratch入門。使い方とゲーム開発の基礎知識
3. 小学生から始めるScratch入門。シューティングゲームを作ろう！
4. 小学生からのプログラミング入門。JavaScriptでおみくじを作ろう！
5. 小学生からのJavaScript入門。今月の残り日数を計算してみよう！
6. 小学生からのJavaScript入門。画像の表示と移動をしてみよう！
7. 小学生からのJavaScript入門。キー入力でキャラを動かしてみよう！
8. 小学生からのJavaScript入門。ファイルを分けて管理してみよう！
9. 小学生からのJavaScript入門。オブジェクトを使ってみよう！
10. 小学生からのJavaScript入門。ゲームのメインループを作ってみよう！
11. 小学生からのJavaScript入門。キャラを決まった間隔ずつ動かす！
12. 小学生からのJavaScript。HTML5とCanvasを使ってみよう！
13. 小学生からのJavaScript。迷路やRPGで使えるマップを作ってみよう！
14. 小学生からのJavaScript。マップでキャラを動かせるようにしよう！

• 1
  Tweet
• 1
  Facebook
• 0
  GooglePlus
• 0
  はてブ
• 0
  Pocket