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. 小学生からのプログラミング入門。JavaScriptでおみくじを作ろう!
  2. 小学生からのJavaScript入門。今月の残り日数を計算してみよう!
  3. 小学生からのJavaScript入門。画像の表示と移動をしてみよう!
  4. 小学生からのJavaScript入門。キー入力でキャラを動かしてみよう!
  5. 小学生からのJavaScript入門。ファイルを分けて管理してみよう!
  6. 小学生からのJavaScript入門。オブジェクトを使ってみよう!
  7. 小学生からのJavaScript入門。ゲームのメインループを作ってみよう!
  8. 小学生からのJavaScript入門。キャラを決まった間隔ずつ動かす!
  9. 小学生からのJavaScript。HTML5とCanvasを使ってみよう!
  10. 小学生からのJavaScript。迷路やRPGで使えるマップを作ってみよう!
  11. 小学生からのJavaScript。マップでキャラを動かせるようにしよう!
  12. 小学生からのJavaScript。クラスの概念をしっかりと理解しよう!
  13. 小学生からのJavaScript。プログラム全体をクラスを使って作ってみよう!
  14. 小学生からのJavaScript。文字を表示するクラスを作ってみよう!
  15. 小学生からのJavaScript。改行と一文字ずつ画面に表示する方法!
  16. JavaScript|ノベルゲーム風にキー入力で文字を切り替える方法!

スポンサードリンク

関連コンテンツ

オススメ記事

【Xcode7】Storyboardを使ってMacアプリ開発に挑戦。

何だか今日はトイレが近い。@It_is_Rでございます。 現在開発中の人魚のゲームは今ストーリーを練っている所です。まだまだ時間がかかりそうです。 さて、Rは今、Macアプリ開発を勉強中なので

【初心者向け】webpack 4入門。一番簡単で詳しい使い方

風邪をひいてぼんやりしている@It_is_Rです。どちらにしろいつもぼんやりしてますが。 さて、今回はWebpack4について紹介していきたいと思います。 この記事では、jsファイルをビルドす

gulp

gulp4完全攻略ガイド。インストールから使い方まで徹底解説!

幸せそうな人を見ると、転べって思います。@It_is_Rです。 Webページを制作するとき、sassをcssに変換して使用することが多いと思います。 今回はgulp4の使い方を、インストールか

JavaScriptマンガ講座。初心者でも痛いほど理解できる変数の使い方。(実践編)

押入れが部屋になっている@It_is_Rです。 今回の記事はJavaScriptマンガ講座、2回目となりました。 この企画はJavaScriptをフザケまくって覚えようというものです。

キー入力で文字を切り替えるべ

JavaScript|ノベルゲーム風にキー入力で文字を切り替える方法!

小学生からのJavaScript講座です。 前回、文字を一文字づつ表示させる方法と改行の方法を紹介しました。 今回はこのプログラムに、キー入力によって文字を切り替えられる機能をつけてみましょう

enchant.js100行未満!!本格シューティングゲーム作り方。

昨日歩き回ったせいで、足がかなり痛い@It_is_Rです。 さて、今回はenchant.jsのネタです。enchant.jsを使うと、javascriptのプログラムがものすごく簡単に書けてしま

Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。

今回は Bootstrap 4 の使い方です。It_is_Rです。 では詳しくみていきましょう。 Bootstrap とは Bootstrap は Webサイトを制作するときに使う、

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

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

wordpress

WordPress – デフォルトで用意されたショートコード一覧と使い方。

昔は WordPress の画面が真っ白になって、頭も真っ白になったこともありました。@It_is_Rです。 WordPress では、プラグインを使ったりしない限り、投稿記事のなかで php

Scratchで じゃんけんゲームを作ろう!

小学生から始めるScratch入門。じゃんけんゲームを作ろう!

小学生から始めるScratch入門です。 前回、スクラッチでシューティングゲームを作りました。 今回はじゃんけんゲームを作ってみましょう。 プロローグ [serif icon=

コメントをどうぞ!

メールアドレスが公開されることはありません。