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】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門

スポンサードリンク

関連コンテンツ

オススメ記事

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

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

画像を動かすよ!

JavaScriptで画像を移動してみよう! 小学生からのプログラミング入門

みなさんこんにちは。今回も、プログラミングの勉強《べんきょう》をはじめていきましょう! 前回、「JavaScriptで画像を表示してみよう! 小学生からのプログラミング入門」では、JavaSc

java

Javaでじゃんけんゲームを作ろう。サンプルコードあり!

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

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

JavaScriptを使ってゲームを作成するのが好きです。@It_is_Rです。 JavaScriptはWebページに動きを出すのによく使われ、ブラウザゲームなども作ることができます。今回は

メインループを作ってみよう!

【JavaScript】ゲームのメインループを作ってみよう! 小学生からのプログラミング入門

小学生からのJavaScript《ジャバスクリプト》入門講座《にゅうもんこうざ》、第7弾です。 突然《とつぜん》ですが、ゲーム開発《かいはつ》の基本として大切なことってなんだったか覚えています

リセットCSS は何を使う? おすすめ8選(コピペも可能!)

Web開発でブラウザごとの表示の違いをリセットしてくれる リセットCSS というものがあります。 しかし、何を使っていいのかと感じている人もいると思います。 今回はこの リセットCSS につい

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。【準備編】

いつもどうもです。@It_is_Rです。 少し前まで、私は FC2ブログ を使っていました。 やはり個性を大切にしたい私にとって、用意されたテンプレートを使うことに抵抗がありました。 「

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

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

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。ブログ全体の幅を変更。

現実社会では殆ど言葉を発しない@It_is_Rです。だって、厄介なことになりたくないじゃん。 今回も前回に引き続き、FC2ブログカスタマイズの記事です。前回、ヘッダーのサイズを変更しましたが、ブ

Gitの使い方。バージョン管理する流れを、実際にやってみよう

こんにちは。@It_is_Rです。 前回「【Mac】Gitのダウンロードとインストールの手順」では、Gitのインストーラを公式サイトからダウンロードしてインストールする方法と、Homebrew

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

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

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

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

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

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

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

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

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

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