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

小学生からのJavaScript。迷路やRPGで使えるマップを作ってみよう!

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

前回は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);

ひとつずつ表示できる!

アル

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


りこ

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


山田

マップチップの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。改行と一文字ずつ画面に表示する方法!

スポンサードリンク

関連コンテンツ

オススメ記事

Homebrew

Homebrewのインストール&使い方。すぐに使える詳しい解説!

※追記 この記事は2018/04/30に最新の情報に書き直しました。 人生をもう一度やり直したいとつくづく思う@It_is_Rです。 今回はHomebrewについての記事を書いて

【webpack 4】npm-scriptsでオリジナルのコマンドを設定する方法

※追記(2018/5/15) 殆ど意味のない例を使っての説明にのちのち後悔し、余分な部分を大幅に削除しました。 畳んだ布団が飼い猫のお気に入りの場所になってます。@It_is_Rです。

wordpress

WordPress管理画面のテーマカスタマイザーに独自の項目を追加。

WordPressみたいに私自身の人生もカスタムできたらいいのに。@It_is_Rです。 WordPressのカスタマイズは、公開しているサイトだけではありません。 管理画面をカスタマイズする

WordPress テーマ自作!投稿ページ、固定ページの作り方。

サンタは何故お爺さんなんでしょうか。@It_is_Rです。 今年からサンタのギャルにしましょう。 WordPress テーマ自作シリーズ第7回目です。 今回は、投稿ページと固定ページを作って

HTML CSS

CSSで文字を、円の上下左右中央ド真ん中に表示する方法。

体重が50キロを切りました。@It_is_Rです。身長は171あります。 骨っていうなー! サイトを作る時、円形のパーツを作りたい時ってよくありますよね。画像を丸くして。。。なんてやっている人

WordPress|特定カテゴリーに属する記事を一覧表示させる方法!!

今まで、何度かに分けて書いた記事でも、その一覧がなかったので見にくいなーと思っていた@It_is_Rです。 昨日、記事の一覧表示をするショートコードを作って、記事の一覧が欲しい記事にだけ貼り付けてみ

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

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

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。背景を変更する。

三度の飯よりも好きなものが多すぎて比較にならない@It_is_Rです。 FC2ブログ"最強"カスタマイズ入門講座の続きですね。最強にカスタマイズしていきましょう。 今回は背景色の変更をメインに

java

Eclipseによる、Javaでじゃんけんゲームプログラムの作り方

※追記(2018/8/29) より分かりやすい記事になるよう修正しました。 今回はJavaを使って、じゃんけんゲームを作る方法を紹介します。 eclipseがインストールされ

scratch

小学生から始めるScratch入門。シューティングゲームを作ろう!

小学生から始めるScratch入門です。 前回、ゲーム開発に必要な知識を学びました。 第3回目の今回は、これまでに学んだ知識を活用し、実際にシューティングゲームを作ってみようと思います。

コメントをどうぞ!

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