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

更新 : 2024/05/02

カテゴリー : JavaScript, プログラミング・Web

by : It is R

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

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

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

もし、本格的にRPGを作りたい方は「JavaScriptで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に１ずつ足していく、ということです。
なので、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でつかえる、マップの作り方について紹介《しょうかい》しました。
プログラミングでマップを作成《さくせい》するときも、文字を使って作っていきます。
ちょっと難《むずか》しいかもしれないのですが、これができればゲーム開発《かいはつ》の幅《はば》がかなり広がります。
ぜひ、挑戦《ちょうせん》してみてください。