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

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

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

前回は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. 小学生から始めるプログラミング入門。プログラミングってなぁに?
  2. 小学生から始めるScratch入門。使い方とゲーム開発の基礎知識
  3. 小学生から始めるScratch入門。シューティングゲームを作ろう!
  4. 小学生からのプログラミング入門。JavaScriptでおみくじを作ろう!
  5. 小学生からのJavaScript入門。今月の残り日数を計算してみよう!
  6. 小学生からのJavaScript入門。画像の表示と移動をしてみよう!
  7. 小学生からのJavaScript入門。キー入力でキャラを動かしてみよう!
  8. 小学生からのJavaScript入門。ファイルを分けて管理してみよう!
  9. 小学生からのJavaScript入門。オブジェクトを使ってみよう!
  10. 小学生からのJavaScript入門。ゲームのメインループを作ってみよう!
  11. 小学生からのJavaScript入門。キャラを決まった間隔ずつ動かす!
  12. 小学生からのJavaScript。HTML5とCanvasを使ってみよう!
  13. 小学生からのJavaScript。迷路やRPGで使えるマップを作ってみよう!
  14. 小学生からのJavaScript。マップでキャラを動かせるようにしよう!

スポンサードリンク

関連コンテンツ

オススメ記事

【Android Studio】TextView を使ってテキストを変更、追加する方法。

TextViewの文字列を変更するより、これまでの人生を変更したい@It_is_Rです。 Android Studioを使ったアプリ開発講座6回目です。 今回はアプリに表示されたテキストを変更

Swift

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

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

VCCW

VCCW で、超簡単に WordPress のローカル開発環境を整える方法。

考えすぎて間違った方向へ進む、@It_is_Rです。 WordPress のローカル開発環境を作りたい時、 VCCW を使うと便利です。 今回は、 その方法を紹介します。 VCC

キーボードで画像を動かすよ!

小学生からのJavaScript入門。キー入力でキャラを動かしてみよう!

小学生からのプログラミング入門講座(にゅうもんこうざ)、第7弾です。 前回はHTMLでりこちゃんの画像を表示し、クリックすると前に一歩動くというのをJavaScriptで作りました。 Java

java

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

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

WordPress テーマ自作 | functions.php から CSS を読み込む方法。

ふぁ……ふぁ……、ファンクションッ!! あ、どうも@It_is_Rです。 なに笑ってるんですか? WordPress テーマ自作シリーズ第10回目です。 今回は、 functions.php

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

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

CSS Button

サイト制作に!!CSSでマウスオーバーボタンの作り方。

新年初の記事です。とりあえず、あけましておめでとうございます。@It_is_Rです。 お正月……おそーがつ……おそまつ……おそ松さん。新年早々くだらないこと言ってないで早く記事を書けって話ですね。

HTML CSS

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

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

enchant.js

HTML5 と javascript ( enchant.js )を使ったアクションゲーム開発。

以前、Flashを使って、横スクロールアクションゲームを作ろうとしていたのですが、実はAndroid4.xではFlashPlayerがサポートされておらず、最近のAndroidではFlashPlaye

コメントをどうぞ!

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