1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. JavaScript
  6. »
  7. 【JavaScript】迷路やRPGで使えるマップを作ってみよう! 小学生からのプログラミング入門

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

小学生からのプログラミング講座(こうざ)、第10弾です。

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

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

りこ

りこ

今日はマップの作り方を教(おし)えてくれるのね!


山田

山田

そうだべ。やっぱりキャラが動(うご)いたら、マップが欲(ほ)しいべな


アル

アル

やったー、ポケモンっぽくなるね!

目次
  1. マップを作る前準備(まえじゅんび)
  2. 画像(がぞう)を切り取って表示(ひょうじ)してみよう!
  3. 配列(はいれつ)を使ってみよう!
  4. 繰(く)り返(かえ)しを使ってみよう!
  5. マップを作ってみよう!
  6. まとめ

マップを作る前準備(まえじゅんび)

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

山田

山田

ではこれからマップを作っていくべよ。つかう画像はこれだべよ。右クリックして「名前を付けて保存」で、保存するべよ


アル

アル

なにこれ?


りこ

りこ

小型(こがた)の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);

ひとつずつ表示できる!

アル

アル

こうやって一枚の画像(がぞう)を分けて表示(ひょうじ)できるんだね


りこ

りこ

左右(さゆう)で一枚ずつだったんだ……


山田

山田

マップチップの1枚目と2枚目を切(き)り替(か)えたいときは、左から2番目の数字(imgの右)を変更(へんこう)するだけだべ


アル

アル

なるほど、便利(べんり)だ

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

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

配列(はいれつ)を使ってみよう!

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

アル

アル

なんか、よく分かんないよ


りこ

りこ

わたしもー


山田

山田

難(むずか)しく考(かんが)える必要(ひつよう)はないべよ。例(たと)えばりこちゃん、関ジャニのメンバーを全員(ぜんいん)言えるべか?


りこ

りこ

えっと、錦戸くんでしょ、丸山くんでしょ、大倉くん、村上くん、横山くん、安田くん……


山田

山田

では、関ジャニのメンバーを配列(はいれつ)を使って表示(ひょうじ)してみるべ

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

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

アル

アル

こうやって覚えておいてもらうと、なにか便利(べんり)なの?


山田

山田

配列(はいれつ)を使うと、このなかから簡単(かんたん)にメンバーを呼び出せるんだべ

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

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

じっさいにブラウザで見てみると、このようになります。
錦戸くんと表示される

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

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

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

山田

山田

つまり、配列(はいれつ)は変数(へんすう)の横(よこ)に数字をつけて、いくつもの変数(へんすう)があるように使えるものなんだべ。間違(まちが)えやすい部分(ぶぶん)は、1から数えるんじゃなく、0から数えるというところだべ


りこ

りこ

kanjaniっていう変数(へんすう)ひとつで、関ジャニのメンバー全員(ぜんいん)のデータを覚えておいてもらうことができるのね!


山田

山田

さらに、こんなこともできるんだべ。りこちゃんは関ジャニ以外(いがい)で好きなグループはいるべか?


りこ

りこ

え、えっと……Sexy Zone!


山田

山田

そのなかで、誰(だれ)が好きだべ?


りこ

りこ

うんと、佐藤くんかな

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

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

りこちゃんの好きな佐藤くんは、上から2番目、0から数えると1番目になります。
さらに左から3番目、0から数えると2番目になります。

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

じっさいにブラウザで見てみると、このようになります。
佐藤くんと表示される

山田

山田

こういうふうに、何重(なんじゅう)にもなった配列(はいれつ)を多次元配列というから、覚えておくべ!

繰(く)り返(かえ)しを使ってみよう!

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

アル

アル

繰(く)り返(かえ)しってこの前のメインループとは違(ちが)うの?


山田

山田

あれは関数(かんすう)で自分自身(じぶんじしん)を呼び出して無限(むげん)ループしているんだべ。それとは別のやりかただべよ。いくつかやり方があるべけれども、今回はまず、この2つを覚えるべよ

for文を使ってみよう!

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

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

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を1ずつ増(ふ)やしているので、その数が5になったら繰(く)り返(かえ)しを終了(しゅうりょう)します。

山田

山田

繰(く)り返(かえ)しをつかう時の注意点(ちゅういてん)は、永遠(えいえん)に終(お)わらない条件(じょうけん)を作ってはいけないべよ


りこ

りこ

どういうこと?


山田

山田

例(たと)えば、以下のようにすると永遠(えいえん)に「xは0です」というアラートが表示されるべよ

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

山田

山田

永遠の0だべよ……


りこ

りこ

なるほど……えっ?


アル

アル

えっ?


山田

山田

えっ?

マップを作ってみよう!

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

アル

アル

マップってどうやってつくるのか、全然(ぜんぜん)想像(そうぞう)がつかないよ


山田

山田

数字(すうじ)でマップを表現(ひょうげん)すればいいだべよ


りこ

りこ

数字(すうじ)で?

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

//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);

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

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

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

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

アル

アル

すごい! 迷路(めいろ)みたいなマップができてるよ!


りこ

りこ

ここを私が冒険(ぼうけん)するのね!


山田

山田

そうなんだべ。だけれども、ここでりこちゃんが歩くプログラムを加えても、まだ壁(かべ)との衝突(しょうとつ)判定(はんてい)を作っていないから、壁(かべ)の上を歩けてしまうんだべ


アル

アル

それはそれでかっこいいけど、ゲームにはならないよね


山田

山田

壁(かべ)との衝突(しょうとつ)判定(はんてい)は、次回の記事(きじ)で紹介(しょうかい)していくから、おたのしみにするべ!

まとめ

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

りこ

りこ

きゃー、私、こんなところを歩いたら、迷子(まいご)になっちゃう!


アル

アル

なに言ってんだよ。ゲームなんだから


山田

山田

わだずなら、一瞬(いっしゅん)でクリアできるべ


アル

アル

ホント!?


りこ

りこ

すごーい!


山田

山田

ネコは壁(かべ)なんてのぼればいいべからな


りこ

りこ

……。


アル

アル

ずるい!


山田

山田

まぁまぁ。次回は壁(かべ)との当たり判定(はんてい)を作っていくべよ!


りこ

りこ

はーい!


アル

アル

はーい!

この企画の一覧はこちら

  1. 小学生からのプログラミング入門。プログラミングってなぁに?
  2. Scratchの使い方と、ゲーム作りの基礎知識を学ぼう! 小学生からのプログラミング入門
  3. Scratchでじゃんけんゲームを作ろう! 小学生からのプログラミング入門
  4. Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門
  5. Scratchでピアノ鍵盤を作って音を鳴らそう! 小学生からのプログラミング入門
  6. JavaScriptでおみくじを作ろう! 小学生からのプログラミング入門
  7. JavaScriptで今月の残り日数を計算してみよう! 小学生からのプログラミング入門
  8. JavaScriptで画像の表示と移動をしてみよう! 小学生からのプログラミング入門
  9. 【JavaScript】キー入力でキャラを動かしてみよう! 小学生からのプログラミング入門
  10. 【JavaScript】ファイルを分けて管理してみよう! 小学生からのプログラミング入門
  11. 【JavaScript】オブジェクトを使ってみよう! 小学生からのプログラミング入門
  12. 【JavaScript】ゲームのメインループを作ってみよう! 小学生からのプログラミング入門
  13. 【JavaScript】キャラを決まった間隔ずつ動かす! 小学生からのプログラミング入門
  14. HTML5とCanvasを使ってみよう! 小学生からのプログラミング入門
  15. 【JavaScript】迷路やRPGで使えるマップを作ってみよう! 小学生からのプログラミング入門
  16. 【JavaScript】マップでキャラを動かせるようにしよう! 小学生からのプログラミング入門
  17. 【JavaScript】クラスの概念をしっかりと理解しよう! 小学生からのプログラミング入門
  18. 【JavaScript】プログラム全体をクラスを使って作ってみよう! 小学生からのプログラミング入門
  19. 【JavaScript】文字を表示するクラスを作ってみよう! 小学生からのプログラミング入門
  20. 【JavaScript】改行と一文字ずつ画面に表示する方法! 小学生からのプログラミング入門
  21. 【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門

スポンサードリンク

関連コンテンツ

オススメ記事

zplug を使ってプラグインをインストール、管理する。

二つのことを同時にできない、@It_is_Rです。 今回はターミナルをかっこよくするシリーズ、第三回目です。 zplug を使って、プラグインをインストールする方法を紹介します。

Bootstrap 4によるボタンの作り方。色やサイズなどの指定方法!

Bootstrap4の使い方、第5回目となりました。 Bootstrapの機能のひとつとして、クラスを組み合わせて指定するだけで、色々なボタンが作れます。 今回はBootstrap4を使ったボ

今月の残り日数を計算するべ!

JavaScriptで今月の残り日数を計算してみよう! 小学生からのプログラミング入門

小学生からのJavaScript入門、第2弾です。 今回はJavaScriptでの演算(えんざん)の方法を学び、今月の残り日数を計算してみましょう。 演算というのは、足したり、引いたり、割ったり、か

おみくじゲームを作るべ!

JavaScriptでおみくじを作ろう! 小学生からのプログラミング入門

さて、今日も楽しく、プログラミングを学んでいきましょう!今回はなんと、プログラミングでおみくじゲームを作ってみます。 そして今回から、Scratch(スクラッチより、少しレベルアップして、Ja

マップ上をキャラが移動できるようにしよう!

【JavaScript】マップでキャラを動かせるようにしよう! 小学生からのプログラミング入門

小学生からのプログラミング講座(こうざ)、第11弾です。 前回は、JavaScriptでのマップの作り方を紹介(しょうかい)しました。 しかし、まだマップを配置(はいち)しただけで、キャラクターの画

文字を表示するクラスを作ろう!

【JavaScript】文字を表示するクラスを作ってみよう! 小学生からのプログラミング入門

小学生からのJavaScript講座です。 このシリーズでは、ゲームをつくりながらJavaScriptの使い方を学んでいきます。 シリーズの一覧はこちらをご覧ください。 さて、ゲーム作成で重要なキャ

fish shell

Fish shellの使い方。プラグインなしでもここまで可愛くできる!

先日、Macをフォーマットしたため、今まで構築したきた開発環境が消えました。 といっても、バックアップはとってあるので戻すことはできるのですが、せっかく綺麗に全部消えたので、もう一度作り直そうかな、

SCSS vs SASS どっちが便利か違いを比較。おまいら SASS 使えよ!

CSS を書くときに、 Sass はもう手放せません。 @It_is_R です。 さて、今回のテーマとなる Sass の表記には、2種類ありますよね。 SCSS と、 SASS です。

【Mac】ローカルにWebサーバを立ち上げる超簡単な方法!

JavaScriptを使ってWebページなどの開発をしていると、Google ChromeやSafariなどのブラウザでうまく開けない場合が稀にあります。 そんな時、ローカルにWebサーバを立ち上げ

Android StudioをMacにインストールする方法

Android Studioを使って、Androidアプリ開発を行っていきましょう! 今回は Android Studioをインストールする手順を解説します。 Android Studio

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

    1. >JS初心者の分際ですまぬさん
      ご指摘、ありがとうございます。修正しました。
      セミコロンはよくつけ忘れてしまうので、気をつけたいと思います。
      またよろしくお願いいたします。

  1. 楽しく拝見しております。canvasの呼び込み?ができず、迷路が表示されません。canvasを使えないと迷路ゲームは作れないですか?canvasまでのキーボードで動くのは成功していました。

    1. >にっぽりさん
      コメントありがとうございます。
      canvasを使わずに迷路ゲームは、作れないことはないと思います。
      ただ、多くのブラウザゲームはcanvasを使って作られています。

      canvasの読み込みができない、とのことですが、なにかしらのミスの可能性が大きいと思います。
      正方形を表示するなどの簡単なものでも、読み込まれませんか?
      うまくいかないときは、まず、簡単なプログラムから実行していき、ミスを探すのがいいと思います。

      例えば、index.htmlから、script.jsを呼び込むとき、ファイルの存在する場所の指定は正しいですか?

      また、コンソールからエラーを探すこともできます。
      Google Chromeを使っているならば、右クリックから「検証」、「Console」で開くことができます。

      プログラミングは難しいですが、お互い頑張っていきましょう。

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です