【JavaScript】迷路やRPGで使えるマップを作ってみよう！　小学生からのプログラミング入門

小学生からのプログラミング講座《こうざ》、今回もはじめていきましょう！

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

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

もし、本格的にRPGを作りたい方は「JavaScriptで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に１ずつ足していく、ということです。
なので、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. Scratchでシューティングゲームを作ろう！　小学生からのプログラミング入門
5. Scratchでピアノ鍵盤を作って音を鳴らそう！　小学生からのプログラミング入門
6. テキストエディタ（Visual Studio Code）をインストールしてみよう！　小学生からのプログラミング入門
7. Visual Studio Codeを日本語化してみよう！　小学生からのプログラミング入門
8. JavaScriptでおみくじを作ろう！　小学生からのプログラミング入門
9. JavaScriptで今月の残り日数を計算してみよう！　小学生からのプログラミング入門
10. JavaScriptで画像を表示してみよう！　小学生からのプログラミング入門
11. JavaScriptで画像を移動してみよう！　小学生からのプログラミング入門
12. 【JavaScript】キー入力でキャラを動かしてみよう！　小学生からのプログラミング入門
13. 【JavaScript】ファイルを分けて管理してみよう！　小学生からのプログラミング入門
14. 【JavaScript】オブジェクトを使ってみよう！　小学生からのプログラミング入門
15. 【JavaScript】ゲームのメインループを作ってみよう！　小学生からのプログラミング入門
16. 【JavaScript】キャラを決まった間隔ずつ動かす！　小学生からのプログラミング入門
17. HTML5とCanvasを使ってみよう！　小学生からのプログラミング入門
18. 【JavaScript】迷路やRPGで使えるマップを作ってみよう！　小学生からのプログラミング入門
19. 【JavaScript】マップでキャラを動かせるようにしよう！　小学生からのプログラミング入門
20. 【JavaScript】クラスの概念をしっかりと理解しよう！　小学生からのプログラミング入門
21. 【JavaScript】プログラム全体をクラスを使って作ってみよう！　小学生からのプログラミング入門
22. 【JavaScript】文字を表示するクラスを作ってみよう！　小学生からのプログラミング入門
23. 【JavaScript】改行と一文字ずつ画面に表示する方法！　小学生からのプログラミング入門
24. 【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法！　小学生からのプログラミング入門
25. JavaScriptでRPGを作ろう！スマホにも対応したゲームの作り方
26. webpackを使ってゲームエンジンを作ろう！（JSライブラリの作り方）
27. WindowsにPythonをインストールしてみよう！小学生からのPython入門
28. MacにPythonをインストールしてみよう！小学生からのPython入門
29. Pythonでじゃんけんゲームを作ってみよう！小学生からのPython入門
30. Pythonのtkinterを使って、ウィンドウを表示してみよう！
31. Pythonのtkinterで、画像つきのおみくじゲームを作ろう！

• Tweet
• Facebook
• はてブ
• Pocket