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

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

小学生からのプログラミング講座こうざ、今回もはじめていきましょう!

前回はHTML5とCanvasを使って、キャラクターがキーボードの入力にゅうりょく移動いどうするところまで、紹介しょうかいしました。

さて、今回こんかい迷路めいろゲームやRPGアールピージーなどで使える、マップの作り方を紹介したいと思います。

もし、本格的にRPGを作りたい方は「JavaScriptで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】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門
  23. JavaScriptでRPGを作ろう!スマホにも対応したゲームの作り方
  24. webpackを使ってゲームエンジンを作ろう!(JSライブラリの作り方)

スポンサードリンク

関連コンテンツ

オススメ記事

これまでのプログラム全体をクラスを使って作るべ!

【JavaScript】プログラム全体をクラスを使って作ってみよう! 小学生からのプログラミング入門

小学生からのプログラミング講座《こうざ》、今回もはじめていきましょう! 前回はプログラミングにおける、クラスの使い方を学びました。しかし、まだクラスをどうやって使えばいいのか、ピンときていない

【解決!】Macで「デフォルトシェルはzshになった」と表示されるときの対処法

MacOSをアップデートしてから、ターミナルを開くたびに、「The default interactive shell is now zsh.」というメッセージが表示されるようになりました。 これは

pipenvの使い方。MacにPython環境を構築する方法

みなさんこんにちは。@It_is_Rです。今回はpipenvを使って、MacにPython環境を構築する方法を紹介します。 pipenvとは pipenvは、Pythonでの開発

文字を表示するクラスを作ろう!

【JavaScript】文字を表示するクラスを作ってみよう! 小学生からのプログラミング入門

小学生からのJavaScript講座です。このシリーズでは、ゲームをつくりながらJavaScriptの使い方を学んでいきます。シリーズの一覧はこちらをご覧ください。 さて、ゲーム作成で重要なキ

java

Javaのクラスとメソッドの違いとは?ゲーム風に解説。

この頃小説を読んでいなく、何か読みたいなと思っている@It_is_Rです。 Javaを勉強し始めたばかりの人は、何やら難しい単語に混乱する人も多いでしょう。その中で、クラスとメソッドって一体何が

オブジェクトを使ってみよう!

【JavaScript】オブジェクトを使ってみよう! 小学生からのプログラミング入門

小学生からのJavaScript《ジャバスクリプト》入門講座《にゅうもんこうざ》、今回もはじめていきましょう!前回の講座《こうざ》では、HTMLやCSS、JavaScriptを分けて管理《かんり》す

VCCW

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

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

【初心者向けJavaScrip入門】変数を使いこなすための、かなり詳しい解説

変数は、数値や文字列などのデータを入れておける箱です。プログラミングをはじめて、最初のほうで覚えるものですが、変数は意外と奥が深いものです。 そこで今回は、JavaScriptにおける変数の使

.zshrc で zsh をカスタマイズしてみよう。(プラグイン無し)

昔、車に幽霊が乗っていたので、じっと目を凝らして見ていたら、ただの人だったことがあります。@It_is_Rです。 あの時は気まずかった。。。女性の方でした。 さて、今回はターミナルをかっこよく

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

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

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

  1. 楽しく拝見しております。質問させていただきます。39行目の for (var y=0; y<map.length; y++) がよくわかりません。
    for文の使い方はわかるのですが y<map.length;y++ の部分が特によくわかりません。教えていただくと幸いです。

    1. >ワキガさん
      コメントありがとうございます。

      「for (var y=0; y<map.length; y++)」ですが、これは、マップ生成のために、Y座標の数だけ繰り返しをしています。つまり、縦のマップチップの数だけ繰り返していることになります。
      ちなみに、40行目の「for (var x=0; x<map[y].length; x++)」は、X座標、つまり横のマップチップの数だけ繰り返しています。

      もしご不明な点があれば、またお気軽にお訊ねください。

      1. 自分の読解力、理解力が足りず、申し訳ありません。もう少し詳しく教えていただくとありがたいです。お手数だとは思いますがよろしくおねがいします。

        1. >ワキガさん
          コメントありがとうございます。
          前回のコメントの返信なのですが、私のミスでうまく表示されず、文章が途中で切れてしまっていました。
          たいへん申し訳ございません。修正させていただきました。

          39行目のfor (var y=0; y<map.length; y++)ですが、これはY方向のマップチップの数だけ繰り返すものです。
          lengthというのは、ここでは配列の数を取得するために使っています。

          例えば、以下のようなソースがあったとします。

          var map = [
          	[0, 0, 1, 0, 1],
          	[0, 1, 0, 0, 0],
          	[0, 0, 0, 1, 0]
          ];
          
          console.log( map.length );
          

          この場合、結果は「3」と表示されます。配列に3つのかたまりがあるからです。

          また、7行目を「console.log( map[0].length );」とすれば、「5」と表示されます。
          これは、mapの一番最初のかたまりに5つの要素があるからです。

          記事の方のソースの、39行目のfor (var y=0; y<map.length; y++)では、mapのかたまりの数だけ繰り返すことになり、それがY方向のマップチップの数だけ繰り返すことを意味します。

          この度は、失礼いたしました。
          参考になれば幸いです。

          1. 何度も申し訳ありません。y<map.length;まではわかりやすいご説明のおかげで理解できたのですが、y++がどうしても腑に落ちません…自分の中では+1をするというイメージがあり、こんがらがってしまいます。この考え方は弊害があるでしょうか。

          2. >ワキガさん
            y++というのは、+1する、という意味で正しいです。
            では、頭の整理も兼ねて、for (var y=0; y<map.length; y++)を、分けて順番に考えてみましょう。

            まず「for()」は、繰り返して欲しいときに使います。
            ()の内側には、どういった条件のときに繰り返すのか、を書きます。

            ()の内側の、最初の「var y=0」は、yという変数の初期化です。

            2番目の「y<map.length」は、どのような条件のときに繰り返すか、を書きます。
            今回の場合は、配列のなかのかたまりの数よりもyの値が小さいときに繰り返す、という意味になります。

            そして3番目のy++で、yに1を足します。
            ここで1を足さなければ、2番目の条件の「y<map.length」にずっと当てはまることになってしまい、無限に繰り返すことになってしまいます。

            また、yに1を足すことで、マップ上の、縦方向のマップチップの数や場所をあらわすこともできるようになります。
            今回のプログラムを省略したものとして、yの値でマップを作るように書き換えてみました。

            //変数mapを文字列として宣言
            var map = '';
            
            for ( var y=0; y<10; y++ ) {
            	//改行
            	map += '\n';
            
            	for ( var x=0; x<10; x++ ) {
            		//yに代入されている値をmapに追加(mapは文字列型なので、yの値は文字として認識される)
            		map += y;
            	}
            }
            
            console.log( map );
            

            実行結果はこのようになります。

            0000000000
            1111111111
            2222222222
            3333333333
            4444444444
            5555555555
            6666666666
            7777777777
            8888888888
            9999999999
            

            つまり、yにはこのような数値が入っている、ということです。行が変わるごとに+1されていることが分かります。
            これがもとになり、今回のマップは作られています。

            参考になれば嬉しいです。また遊びにきてください。

          3. 本当に何度も何度もすみません。forの文をお教え頂き、理解出来たのですがそうすると、
            addEventListenerからまたよくわからなくなってしまいます。本当に何度も申し訳ございません。どうか教えていただくとありがたいです。宜しくおねがいします。

          4. >ワキガさん
            こんにちは。
            addEventListener( 'load', function() {} );は、ページが完全に読み込まれたときに{}のなかを実行する、というものです。

            画像などのファイルは読み込みに時間がかかるので、ページが完全に読み込まれる前に画像を表示しようとしても、うまく表示されなかったりします。
            そこで、addEventListener( 'load', function() {} );を使う必要がでてきます。

            ページが完全に読み込まれるのを待ってから実行することで、ちゃんと画像が表示されるようになります。

            参考になれば幸いです。

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

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

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

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

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

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

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

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

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