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++というのは、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. 【JavaScript】キャラを決まった間隔ずつ動かす! 小学生からのプログラミング入門
  15. HTML5とCanvasを使ってみよう! 小学生からのプログラミング入門
  16. 【JavaScript】迷路やRPGで使えるマップを作ってみよう! 小学生からのプログラミング入門
  17. 【JavaScript】マップでキャラを動かせるようにしよう! 小学生からのプログラミング入門
  18. 【JavaScript】クラスの概念をしっかりと理解しよう! 小学生からのプログラミング入門
  19. 【JavaScript】プログラム全体をクラスを使って作ってみよう! 小学生からのプログラミング入門
  20. 【JavaScript】文字を表示するクラスを作ってみよう! 小学生からのプログラミング入門
  21. 【JavaScript】改行と一文字ずつ画面に表示する方法! 小学生からのプログラミング入門
  22. 【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門

スポンサードリンク

関連コンテンツ

オススメ記事

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

Scratchでじゃんけんゲームを作ろう! 小学生からのプログラミング入門

こんにちは! 今日(きょう)もプログラミングのお勉強(べんきょう)をはじめていきますよ! 前回の「Scratchの使い方と、ゲーム作りの基礎知識を学ぼう!」では、Scratch(スクラッチ)っ

カスタムロゴの使い方。 WordPress サイトのタイトルを画像に変更!

笑いたい時に笑えず、笑っちゃいけない時に笑えてくる@It_is_Rです。 今回はカスタムロゴの使い方を紹介したいと思います。 このシリーズの前回の記事はこちらです。 【 WordPres

wordpress

【WordPress】パンくずリストをプラグイン無しで自作する方法

※追記(2018/2/12) もっと高機能になるように、改良修正しました。 人生で3回ほど死にそうになったことがある@It_is_Rです。 WordPressのパンくずリストを作

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。ヘッダーをカスタマイズ。

寒くなってきましたね。皆さま前かがみになって、まるで亀の様です。@It_is_Rです。 皆様がブログを見て、一番最初に目に入ってくるのはどこでしょうか? 殆どの場合、ヘッダー部分ですよね。つま

fish shell

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

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

【CSS設計】ボタンを作って覚える。機能ごとに分けて作る重要性。

手が回らない、頭が回らない、口が回らない。@It_is_Rです。 CSSはある程度大雑把に書いても動かすことができます。しかし、CSSを覚える上で一番難しい部分と言えばCSS設計でしょう。 パ

wordpress

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

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

【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法

Bootstrap4の使い方、第6回目です。 前回、Bootstrap4でのボタンの作り方を紹介しましたが、今回はそのボタンをグループにしてひとまとめにする方法です。 Bootstrapにはボ

Local by Flywheel

Local by Flywheelの使い方。かんたんWordPressローカル環境構築方法

考え事をしていると、目が上にいっている@It_is_Rです。 Local by FlywheelはWordPressのローカル開発環境を簡単に作れるツールです。 今回はこれを使って、ローカルに

FC2でブログを始めよう!誰でも簡単にできるブログの作り方

FC2ブログは、FC2が運営する無料でブログを開設できるサービスです。(有料版もあります) また、FC2のサービスには、動画、ライブ配信、アフィリエイト、小説など、様々なものがあります。 今回

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

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

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

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

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

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

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

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

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

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