あるjQueryで制作されているシミュレーションゲームのソースコードで分からないところがあります。

いつもお世話になっています。ソースコードをずっと眺めていてもラチがあかないので質問させてください。
まずは次のサイトでのシミュレーションゲームでの質問です。
http://www.jquerystudy.info/sample/sim/sample/01_hex.html
ちゃんとこちらを制作された方からソースコードや、画像の提示の許可を頂いています。
今回わからないのは、javascriptにおいて、ある関数の意味がよくわからないので、ご教授ください。

index.html

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<link rel="stylesheet" href="style.css">
6<title>シミュレーション</title>
7</head>
8<body>
9	<div id="mapArea">
10	</div>
11	<div id="selectArea">
12	</div>
13	<div id="unitArea">
14	</div>
15
16
17<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
18<script src="javascript.js"></script>
19</body>
20</html>

style.css

css
1body{
2	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "verdana", sans-serif;
3	color:#362e2b;
4	background-color:#e8dfd2;
5	margin:0px;
6	padding:0px;
7	-webkit-tap-highlight-color: rgba(0,0,0,0);
8	-webkit-touch-callout:none;
9	-webkit-user-select:none;
10}
11
12.hex{
13	position:absolute;
14	background-size:40px;
15	width:40px;
16	height:40px;
17}
18.maskHex{
19	position:absolute;
20	background-color:#000;
21	opacity: 0.8;
22	width:40px;
23	height:40px;
24}
25.unit{
26	text-align:center;
27	position:absolute;
28	width:40px;
29	height:40px;
30}
31

javascript.js

javacript
1var airMovList = [1,1,1,1,1,1,1,1];//----飛行機
2var tankMovList = [99,99,1,2,4,3,99,1];//---戦車
3var moveCostList;//----現在操作しているユニットの移動コストリスト
4
5var hexSize = 40;
6var mapData = [];//---地形データの格納
7var mapLength_x;//---マップのサイズ
8var mapLength_y;//---マップのサイズ
9
10function mapAnalysFunc(myData){
11	var mapArray = myData.split("\r\n");
12	for (var i=0; i<mapArray.length; i++){
13		var mapLineData = [];
14		var lineArray = mapArray[i].split(",");
15		for (j=0;j<lineArray.length;j++){
16			var mapID = Number(lineArray[j].charAt(0));
17			mapLineData.push(mapID);
18			var hexPos = new Object();
19			hexPos.left = j*hexSize;
20			hexPos.top = i*hexSize;
21			$("<div class='hex' id='m_"+i+"_"+j+"'></div>").appendTo("#mapArea").offset(hexPos).css("background-image","url(images/map/"+mapID+"0.png)");
22		}
23		mapData.push(mapLineData);
24	}
25	mapLength_y = i;
26	mapLength_x = j;
27}
28
29
30/*=================================================================
31i...Y軸
32j...X軸
33そして2次配列はYが先
34blankArray[y軸][x軸]
35==================================================================*/
36
37searchArray = [[0,1],[0,-1],[1,0],[-1,0]];
38
39//-------マップと同じサイズの空配列（2次）を作成
40var blankArray;
41function makeBlankArray(){
42	blankArray = [];
43	for(var i=0; i<mapLength_y; i++){
44		var lineArray = [];
45		for(var j=0; j<mapLength_x; j++){
46			lineArray.push(-1);
47		}
48		blankArray.push(lineArray);
49	}
50}
51
52//----------movが-1以下のヘックスをマスク
53function maskFunc(){
54	for(var i=0; i<mapLength_y; i++){
55		for(var j=0; j<mapLength_x; j++){
56			var targetID = "#m_" + i +"_" + j;
57			$(targetID).text(blankArray[i][j]);//---for debug
58			if (blankArray[i][j] < 0){
59				var hexPos = new Object();
60				hexPos.left = j*hexSize;
61				hexPos.top = i*hexSize;
62				$("<div class='maskHex'></div>").appendTo("#selectArea").offset(hexPos);
63			}
64		}
65	}
66}
67
68//--------再帰するマップサーチ
69function searchFunc(y,x,mov){
70	for(var i=0;i<searchArray.length;i++){//-------自分の四方を調べる
71		var myDirection = searchArray[i];
72		var posX = x + myDirection[1];
73		var posY = y + myDirection[0];
74		//-----マップ内かどうかを確認
75		var chk_flg = true;
76		if (posY < 0 || posY > mapLength_y-1) chk_flg = false;
77		if (posX < 0 || posX > mapLength_x-1) chk_flg = false;
78		if (chk_flg){
79			var mapID = mapData[posY][posX];
80			var moveCost = moveCostList[mapID];
81			var nowMov = mov - moveCost;
82
83			if (blankArray[posY][posX] < nowMov){//-----そのセルが自分より小さいかを確認する
84				blankArray[posY][posX] = nowMov;
85				searchFunc(posY,posX,nowMov);//----------再帰
86			}
87		}
88	}
89}
90
91$(function () {
92	$.get("map.txt").done(mapAnalysFunc);//---マップデータの読込
93	$("#mapArea").on("click",".hex",function(){
94		$("#selectArea").empty();
95		var posX = Number(this.id.split("_")[2]);
96		var posY = Number(this.id.split("_")[1]);
97
98		var mov = 5;//=============デバッグ用（ローカル変数であることに注意）
99		moveCostList = tankMovList;//=============デバッグ用（陸上ユニット）こちらはグローバル変数
100
101		makeBlankArray();
102		blankArray[posY][posX] = mov;
103		searchFunc(posY,posX, mov);//----------再帰
104		maskFunc();//---移動できないヘックスをマスクする
105	});
106
107
108});
109

images/map/00.png
![

images/map/20.png

images/map/30.png

images/map/40.png

images/map/50.png

images/map/60.png

ここで分からないのが、makeBlankArray()という関数です。これがないと動かないというのはわかるのですが、何のためにある関数かがわかりません。それを教えていただきたいです。あとfor文が終了したとあとのところにconsole.log(blankArray);として調べたのですが、クリックイベントのmakeBlankArrayが一番最初に実行されているに、lineArrayが-1がプッシュされているので、これも-1が全部入っているだろうなと思ったら、違っていました。searchFunc関数でもこのblankArrayが使われているのでconsole.logで調べようと思ったら、こちらはfor文になっているので調べようがありませんでした。他の部分はなんとなくですが、わかります。ながながと申し訳ございません。頑張って勉強いたしますのでよろしくお願いします。

m.ts10806

2018/01/25 02:07 編集

提示許可をいただく暇があればいっそのことその制作した方に聞いてしまえばよかったのでは・・・。もっとも分かっているのは制作者なわけですし。

ikedas

2018/01/25 02:41

「これがないと動かないというのはわかる」とのことですが、何が「わかる」のでしょうか。①ひとまず、makeBlankArray()を含む一連の処理が何をしているのかを、あなたがわかる範囲で説明してみて下さい。②そしてその次に、わからない点について何がわからないのか説明して下さい。以上①、②を順を追って説明してもらわないと、他人にはあなたに何がわからないのかがわからないです。

gomatan1258

2018/01/25 03:02

お二方とも、返信ありがとうございます。紛らわしくて申し訳ございませんでした。maskFunc()や、searchFunc()関数にblankArrayという配列が使われているので、これがないと動かないという認識です。それだけでした。予想なのですが、makeBlankArray()は物体がマスを動けるか動けないかを判定するための数値を配列に入れたものなのでしょうか？よくわかりません。

ikedas

2018/01/25 03:29

「再帰」とコメントがありますが、この言葉の意味はわかりますか (わからなければとりあえずご自分で調べてみて、それでもわからないところがあれば、どこがわからないか言って下さい)。

gomatan1258

2018/01/25 03:33

searchFuncのなかにsearchFuncを入れてある条件に達するまでループするということで大丈夫でしょうか？

ikedas

2018/01/25 03:44

ループみたいなものです (for文のことではないですよ。再帰関数自体がループのようなはたらきをします)。で、「ある条件」とはどんな条件かわかりますか。

gomatan1258

2018/01/25 03:47

if (blankArray[posY][posX] < nowMov)　この条件が偽になるとループを抜けるで大丈夫でしょうか？

ikedas

2018/01/25 03:54

そういうことになりますね。もう少しソースをながめてみて、blankArrayにどんなものが入るのかを考えてみて下さい (昼休み終わっちゃうんで、明日また見に来ます)。

gomatan1258

2018/01/25 03:56

わかりやすく教えていただいて、ありがとうございます。なんか段々とわかってきたようにも感じます。

行動規範の内容に同意します

回答1件

ベストアンサー

Arrayは参照型なので、おそらく-1以外の値が入った状態のものを見ているのかな、と思います。
（console.logを実行したタイミングの状態ではなく、コンソールから内容を見ようとした時点のものが表示されるためです）
試しに、初期化が終わったタイミング（makeBlankArrayの最後の行あたり）にBreak pointを張って処理を停止した状態で見てみたらすべて-1が入っている状態になっていませんか？

投稿2018/01/25 09:48

編集2018/01/25 09:50

edom18

総合スコア2283

gomatan1258

2018/01/25 10:22

ご返信ありがとうございます。配列は参照型なので、console.log入れて内容が違うということも起きるんですね。このあたりが当方は弱いので、勉強させていただこうかと思います。あとブレイクポイントですが、やり方が調べても分からなかったので、おおまかでいいのでどういう風にすればできるか教えていただけないでしょうか？よろしくお願いします。

edom18

2018/01/25 10:45

コンソールの「Sources」タブを開くと左側カラムにJSファイルのリストが出てくるので、そこで該当のファイルを選ぶと内容が表示されます。あとは行数あたりをクリックするとBreak pointが設定されるので、その行が実行されると自動的にブレイクします。あるいは、JSファイル側に、停止したい位置に「debugger;」の1行を入れておくと自動的にそこでブレイクしてくれるので、確実に止めたい場合はこちらのほうが便利です。

gomatan1258

2018/01/25 11:50

makeBlankArray()のfor文が終わった後に console.log(blankArray); debugger; を挿入したら配列の中身が全て-1になっていました。 debugger;を初めて使ったのでどういう風になっているかまだ分かりませんが、これで if (blankArray[posY][posX] < nowMov)のblankArra[posY][posX]の初期値が-1と分かって、ソースコードがだいぶんわかったような気がします。ありがとうございました。

行動規範の内容に同意します