小学生からのプログラミング講座（こうざ）、第１０弾です。
前回はHTML5とCanvasを使って、キャラクターがキーボードの入力（にゅうりょく）で移動（いどう）するところまで、紹介（しょうかい）しました。
さて、今回（こんかい）は迷路（めいろ）ゲームやRPG（アールピージー）などで使える、マップの作り方を紹介したいと思います。
りこ
今日はマップの作り方を教（おし）えてくれるのね！
山田
そうだべ。やっぱりキャラが動（うご）いたら、マップが欲（ほ）しいべな
アル
やったー、ポケモンっぽくなるね！
マップを作る前準備（まえじゅんび）
まずはマップを作るための準備（じゅんび）として、画像（がぞう）を用意（ようい）しましょう。
山田
ではこれからマップを作っていくべよ。つかう画像はこれだべよ。右クリックして「名前を付けて保存」で、保存するべよ
アル
なにこれ？
りこ
小型（こがた）のUSBメモリじゃない？ パソコンにさして、データを保存（ほぞん）できるやつ
アル
へぇ、すごい！ そんなのがあるのかー。りこちゃん、よく知ってるね！
りこ
えっへん！
山田
床（ゆか）と壁（かべ）だべ
りこ
はっ！ //////
アル
……えっ？
先ほどの画像（がぞう）を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);
アル
こうやって一枚の画像（がぞう）を分けて表示（ひょうじ）できるんだね
りこ
左右（さゆう）で一枚ずつだったんだ……
山田
マップチップの１枚目と２枚目を切（き）り替（か）えたいときは、左から２番目の数字（imgの右）を変更（へんこう）するだけだべ
アル
なるほど、便利（べんり）だ
さて、今回はマップを作っていきたいのですが、そのためには新（あたら）しいお願（ねが）い方法（ほうほう）を覚えなければなりません。
配列（はいれつ）と、繰（く）り返（かえ）しです。
配列（はいれつ）を使ってみよう！
配列（はいれつ）とは、変数（へんすう）に添字（そえじ）を使って、いくつも変数があるように扱（あつか）えるものです。
アル
なんか、よく分かんないよ
りこ
わたしもー
山田
難（むずか）しく考（かんが）える必要（ひつよう）はないべよ。例（たと）えばりこちゃん、関ジャニのメンバーを全員（ぜんいん）言えるべか？
りこ
えっと、錦戸くんでしょ、丸山くんでしょ、大倉くん、村上くん、横山くん、安田くん……
山田
では、関ジャニのメンバーを配列（はいれつ）を使って表示（ひょうじ）してみるべ
関ジャニのメンバーは現在６人です。
では、メンバーをkanjaniという配列（はいれつ）に覚えておいてもらいましょう。
var kanjani = [ '丸山くん', '大倉くん', '村上くん', '横山くん', '錦戸くん', '安田くん' ];
アル
こうやって覚えておいてもらうと、なにか便利（べんり）なの？
山田
配列（はいれつ）を使うと、このなかから簡単（かんたん）にメンバーを呼び出せるんだべ
では、メンバーの中から、りこちゃんの大好きな「錦戸くん」をとりだしてみましょう。
とりだすには、kanjani[4]というように、添字（そえじ）を使います。４というのは、０から数えて４番目に「錦戸くん」のデータがあるからです。
var kanjani = [ '丸山くん', '大倉くん', '村上くん', '横山くん', '錦戸くん', '安田くん' ]; alert ( kanjani[4] );
じっさいにブラウザで見てみると、このようになります。
また、メンバーの人数（にんずう）を見ることもできます。
kanjaniという配列（はいれつ）が、データをいくつ覚えているかを見ればいいので、lengthを使います。
var kanjani = [ '丸山くん', '大倉くん', '村上くん', '横山くん', '錦戸くん', '安田くん' ]; alert ( kanjani.length );
じっさいにブラウザで見てみると、このようになります。
山田
つまり、配列（はいれつ）は変数（へんすう）の横（よこ）に数字をつけて、いくつもの変数（へんすう）があるように使えるものなんだべ。間違（まちが）えやすい部分（ぶぶん）は、１から数えるんじゃなく、０から数えるというところだべ
りこ
kanjaniっていう変数（へんすう）ひとつで、関ジャニのメンバー全員（ぜんいん）のデータを覚えておいてもらうことができるのね！
山田
さらに、こんなこともできるんだべ。りこちゃんは関ジャニ以外（いがい）で好きなグループはいるべか？
りこ
え、えっと……Sexy Zone！
山田
そのなかで、誰（だれ）が好きだべ？
りこ
うんと、佐藤くんかな
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を１ずつ増（ふ）やしているので、その数が５になったら繰（く）り返（かえ）しを終了（しゅうりょう）します。
山田
繰（く）り返（かえ）しをつかう時の注意点（ちゅういてん）は、永遠（えいえん）に終（お）わらない条件（じょうけん）を作ってはいけないべよ
りこ
どういうこと？
山田
例（たと）えば、以下のようにすると永遠（えいえん）に「xは0です」というアラートが表示されるべよ
var x = 0;
while ( x === 0 ) {
alert( 'xは0です' );
}
山田
永遠の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でつかえる、マップの作り方について紹介（しょうかい）しました。
プログラミングでマップを作成（さくせい）するときも、文字（もじ）を使って作っていきます。
ちょっと難（むずか）しいかもしれないのですが、これができればゲーム開発（かいはつ）の幅（はば）がかなり広がります。
ぜひ、挑戦（ちょうせん）してみてください。
りこ
きゃー、私、こんなところを歩いたら、迷子（まいご）になっちゃう！
アル
なに言ってんだよ。ゲームなんだから
山田
わだずなら、一瞬（いっしゅん）でクリアできるべ
アル
ホント！？
りこ
すごーい！
山田
ネコは壁（かべ）なんてのぼればいいべからな
りこ
……。
アル
ずるい！
山田
まぁまぁ。次回は壁（かべ）との当たり判定（はんてい）を作っていくべよ！
りこ
はーい！
アル
はーい！
この企画の一覧はこちら
- 小学生からのプログラミング入門。JavaScriptでおみくじを作ろう！
- 小学生からのJavaScript入門。今月の残り日数を計算してみよう！
- 小学生からのJavaScript入門。画像の表示と移動をしてみよう！
- 小学生からのJavaScript入門。キー入力でキャラを動かしてみよう！
- 小学生からのJavaScript入門。ファイルを分けて管理してみよう！
- 小学生からのJavaScript入門。オブジェクトを使ってみよう！
- 小学生からのJavaScript入門。ゲームのメインループを作ってみよう！
- 小学生からのJavaScript入門。キャラを決まった間隔ずつ動かす！
- 小学生からのJavaScript。HTML5とCanvasを使ってみよう！
- 小学生からのJavaScript。迷路やRPGで使えるマップを作ってみよう！
- 小学生からのJavaScript。マップでキャラを動かせるようにしよう！
- 小学生からのJavaScript。クラスの概念をしっかりと理解しよう！
- 小学生からのJavaScript。プログラム全体をクラスを使って作ってみよう！
- 小学生からのJavaScript。文字を表示するクラスを作ってみよう！
- 小学生からのJavaScript。改行と一文字ずつ画面に表示する方法！
- JavaScript｜ノベルゲーム風にキー入力で文字を切り替える方法！
楽しく拝見しております。canvasの呼び込み？ができず、迷路が表示されません。canvasを使えないと迷路ゲームは作れないですか？canvasまでのキーボードで動くのは成功していました。