teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問JavaScriptのコードで2D迷路だけを表示するため最小限までスリム化したいのですが

編集履歴

質問編集履歴

2

コードブロック調整しました。

2018/09/03 11:28

投稿

tomeater
tomeater

スコア15

test CHANGED
File without changes
test CHANGED
@@ -278,6 +278,4 @@
278
278
 
279
279
 
280
280
 
281
- コード
282
-
283
281
  ```

1

コードブロックにいれました

2018/09/03 11:28

投稿

tomeater
tomeater

スコア15

test CHANGED
File without changes
test CHANGED
@@ -28,272 +28,256 @@
28
28
 
29
29
 
30
30
 
31
+ <!DOCTYPE; HTML>
32
+
33
+ <html lang="ja">
34
+
35
+ <head>
36
+
37
+ <meta charset="UTF-8"/>
38
+
39
+ <title>MAZE</title>
40
+
41
+ <style>canvas{ background-color:#00FFFF;}</style>
42
+
43
+ </head>
44
+
45
+ <body>
46
+
47
+ <canvas width="480" height="360" id="canvas"></canvas>
48
+
49
+
50
+
51
+ <script type="text/javascript">
52
+
53
+ var canvas = document.getElementById("canvas");
54
+
55
+ var context = canvas.getContext("2d");
56
+
57
+
58
+
59
+ var maze =
60
+
61
+ [[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
62
+
63
+ [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
64
+
65
+ [1,0,1,0,1,1,1,1,1,1,1,1,1,1,1,1],
66
+
67
+ [1,0,1,0,1,1,1,1,1,1,1,1,1,1,1,1],
68
+
69
+ [1,0,1,0,0,0,0,0,0,0,0,0,0,1,1,1],
70
+
71
+ [1,0,1,0,1,1,1,0,1,1,1,1,0,1,1,1],
72
+
73
+ [1,0,1,0,1,1,1,0,1,1,1,1,0,1,1,1],
74
+
75
+ [1,0,1,0,1,1,1,0,1,1,1,1,0,1,1,1],
76
+
77
+ [1,0,1,0,1,1,1,0,1,1,1,1,0,1,1,1],
78
+
79
+ [1,0,1,0,1,1,1,1,1,1,1,1,0,1,1,1],
80
+
81
+ [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
82
+
83
+ [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]];
84
+
85
+
86
+
87
+
88
+
89
+ var queue = new Array();
90
+
91
+ var route = new Array(12);
92
+
93
+
94
+
95
+ for(var i=0; i<12; i++){
96
+
97
+ route[i] = new Array(16);
98
+
99
+ }
100
+
101
+
102
+
103
+ var WALKED = 99;
104
+
105
+ var isGoal = false;
106
+
107
+
108
+
109
+ var startPos = {x:1,y:1}, goalPos = {x:13,y:9};
110
+
111
+ queue.push({x:startPos.x,y:startPos.y});
112
+
113
+
114
+
115
+
116
+
117
+ var mazeDraw=function(){
118
+
119
+ for(y=0; y<12; y++){
120
+
121
+ for(x=0; x<16; x++){
122
+
123
+
124
+
125
+ if(maze[y][x] == 1) {
126
+
127
+ context.fillStyle = "rgb(150,200,100)";
128
+
129
+ context.fillRect(x*30, y*30, 30, 30);
130
+
131
+ }
132
+
133
+ if(maze[y][x] == WALKED){
134
+
135
+ context.fillStyle = "rgb(80,100,150)";
136
+
137
+ context.fillRect(x*30, y*30,30,30);
138
+
139
+ }
140
+
141
+ }
142
+
143
+ }
144
+
145
+ context.fillStyle = "rgb(100,100,200)";
146
+
147
+ context.fillRect(startPos.x*30, startPos.y*30,30,30);
148
+
149
+ context.fillStyle = "rgb(255,255,0)";
150
+
151
+ context.fillRect(goalPos.x*30, goalPos.y*30,30,30);
152
+
153
+ }
154
+
155
+
156
+
157
+
158
+
159
+ var BFS = function(){
160
+
161
+ var pos =queue.shift();
162
+
163
+ var x = Pos.x;
164
+
165
+ var y = Pos.y;
166
+
167
+
168
+
169
+
170
+
171
+ if(x==goalPos.x && y == goalPos.y){
172
+
173
+ context.fillStyle="rgb(150,150,0)";
174
+
175
+ for(;;){
176
+
177
+ pos=route[y][x];
178
+
179
+ if(pos.px==startPos.x && pos.py==startPos.y){
180
+
181
+ break;
182
+
183
+ }
184
+
185
+ context.fillRect(Pos.px*30, Pos.py*30, 30, 30);
186
+
187
+ x = Pos.px;
188
+
189
+ y = Pos.py;
190
+
191
+
192
+
193
+ }
194
+
195
+ alert("goal");
196
+
197
+ isGoal=true;
198
+
199
+ return;
200
+
201
+ }
202
+
203
+ if(maze[y-1][x] == 0){
204
+
205
+ queue.push({x:x,y:y-1});
206
+
207
+ route[y-1][x] = {px:x,py:y};
208
+
209
+ maze[y-1][x] = WALKED;
210
+
211
+ }
212
+
213
+ if(maze[y+1][x] == 0){
214
+
215
+ queue.push({x:x,y:y+1});
216
+
217
+ route[y+1][x] = {px:x,py:y};
218
+
219
+ maze[y+1][x] = WALKED;
220
+
221
+ }
222
+
223
+ if(maze[y][x-1] == 0){
224
+
225
+ queue.push({x:x-1,y:y});
226
+
227
+ route[y][x-1] = {px:x,py:y};
228
+
229
+ maze[y][x-1] = WALKED;
230
+
231
+ }
232
+
233
+ if(maze[y][x+1] == 0){
234
+
235
+ queue.push({x:x+1,y:y});
236
+
237
+ route[y][x+1] = {px:x,py:y};
238
+
239
+ maze[y][x+1] = WALKED;
240
+
241
+ }
242
+
243
+
244
+
245
+ return;
246
+
247
+
248
+
249
+ }
250
+
251
+
252
+
253
+ window.onload= mazeDraw ;
254
+
255
+
256
+
257
+ var walk = function(){
258
+
259
+ if(!isGoal){
260
+
261
+ mazeDraw();
262
+
263
+ BFS();
264
+
265
+ }
266
+
267
+ }
268
+
269
+
270
+
271
+ </script>
272
+
273
+ </body>
274
+
275
+ </html>
276
+
277
+
278
+
279
+
280
+
31
281
  コード
32
282
 
33
283
  ```
34
-
35
-
36
-
37
-
38
-
39
- <!DOCTYPE; HTML>
40
-
41
- <html lang="ja">
42
-
43
- <head>
44
-
45
- <meta charset="UTF-8"/>
46
-
47
- <title>MAZE</title>
48
-
49
- <style>canvas{ background-color:#00FFFF;}</style>
50
-
51
- </head>
52
-
53
- <body>
54
-
55
- <canvas width="480" height="360" id="canvas"></canvas>
56
-
57
-
58
-
59
- <script type="text/javascript">
60
-
61
- var canvas = document.getElementById("canvas");
62
-
63
- var context = canvas.getContext("2d");
64
-
65
-
66
-
67
- var maze =
68
-
69
- [[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
70
-
71
- [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
72
-
73
- [1,0,1,0,1,1,1,1,1,1,1,1,1,1,1,1],
74
-
75
- [1,0,1,0,1,1,1,1,1,1,1,1,1,1,1,1],
76
-
77
- [1,0,1,0,0,0,0,0,0,0,0,0,0,1,1,1],
78
-
79
- [1,0,1,0,1,1,1,0,1,1,1,1,0,1,1,1],
80
-
81
- [1,0,1,0,1,1,1,0,1,1,1,1,0,1,1,1],
82
-
83
- [1,0,1,0,1,1,1,0,1,1,1,1,0,1,1,1],
84
-
85
- [1,0,1,0,1,1,1,0,1,1,1,1,0,1,1,1],
86
-
87
- [1,0,1,0,1,1,1,1,1,1,1,1,0,1,1,1],
88
-
89
- [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
90
-
91
- [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]];
92
-
93
-
94
-
95
-
96
-
97
- var queue = new Array();
98
-
99
- var route = new Array(12);
100
-
101
-
102
-
103
- for(var i=0; i<12; i++){
104
-
105
- route[i] = new Array(16);
106
-
107
- }
108
-
109
-
110
-
111
- var WALKED = 99;
112
-
113
- var isGoal = false;
114
-
115
-
116
-
117
- var startPos = {x:1,y:1}, goalPos = {x:13,y:9};
118
-
119
- queue.push({x:startPos.x,y:startPos.y});
120
-
121
-
122
-
123
- //var presentPos = {x:startPos.x,y:startPos.y};
124
-
125
-
126
-
127
- var mazeDraw=function(){
128
-
129
- for(y=0; y<12; y++){
130
-
131
- for(x=0; x<16; x++){
132
-
133
-
134
-
135
- if(maze[y][x] == 1) {
136
-
137
- context.fillStyle = "rgb(150,200,100)";
138
-
139
- context.fillRect(x*30, y*30, 30, 30);
140
-
141
- }
142
-
143
- if(maze[y][x] == WALKED){
144
-
145
- context.fillStyle = "rgb(80,100,150)";
146
-
147
- context.fillRect(x*30, y*30,30,30);
148
-
149
- }
150
-
151
-
152
-
153
- }
154
-
155
- }
156
-
157
- context.fillStyle = "rgb(100,100,200)";
158
-
159
- context.fillRect(startPos.x*30, startPos.y*30,30,30);
160
-
161
- context.fillStyle = "rgb(255,255,0)";
162
-
163
- context.fillRect(goalPos.x*30, goalPos.y*30,30,30);
164
-
165
- //context.fillStyle = "rgb(255,125,0)";
166
-
167
- //context.fillRect(presentPos.x*30, presentPos.y*30, 30, 30);
168
-
169
- }
170
-
171
-
172
-
173
-
174
-
175
- var BFS = function(){
176
-
177
- var pos =queue.shift();
178
-
179
- var x = Pos.x;
180
-
181
- var y = Pos.y;
182
-
183
-
184
-
185
- //var x = presentPos.x;
186
-
187
- //var y = presentPos.y;
188
-
189
- //var pos = {x:presentPos.x, y:presentPos.y};
190
-
191
-
192
-
193
- if(x==goalPos.x && y == goalPos.y){
194
-
195
- context.fillStyle="rgb(150,150,0)";
196
-
197
- for(;;){
198
-
199
- pos=route[y][x];
200
-
201
- if(pos.px==startPos.x && pos.py==startPos.y){
202
-
203
- break;
204
-
205
- }
206
-
207
- context.fillRect(Pos.px*30, Pos.py*30, 30, 30);
208
-
209
- x = Pos.px;
210
-
211
- y = Pos.py;
212
-
213
-
214
-
215
-
216
-
217
- }
218
-
219
- alert("goal");
220
-
221
- isGoal=true;
222
-
223
- return;
224
-
225
- }
226
-
227
- if(maze[y-1][x] == 0){
228
-
229
- queue.push({x:x,y:y-1});
230
-
231
- route[y-1][x] = {px:x,py:y};
232
-
233
- maze[y-1][x] = WALKED;
234
-
235
- }
236
-
237
- if(maze[y+1][x] == 0){
238
-
239
- queue.push({x:x,y:y+1});
240
-
241
- route[y+1][x] = {px:x,py:y};
242
-
243
- maze[y+1][x] = WALKED;
244
-
245
- }
246
-
247
- if(maze[y][x-1] == 0){
248
-
249
- queue.push({x:x-1,y:y});
250
-
251
- route[y][x-1] = {px:x,py:y};
252
-
253
- maze[y][x-1] = WALKED;
254
-
255
- }
256
-
257
- if(maze[y][x+1] == 0){
258
-
259
- queue.push({x:x+1,y:y});
260
-
261
- route[y][x+1] = {px:x,py:y};
262
-
263
- maze[y][x+1] = WALKED;
264
-
265
- }
266
-
267
-
268
-
269
- return;
270
-
271
-
272
-
273
- }
274
-
275
-
276
-
277
- window.onload= mazeDraw ;
278
-
279
-
280
-
281
- var walk = function(){
282
-
283
- if(!isGoal){
284
-
285
- mazeDraw();
286
-
287
- BFS();
288
-
289
- }
290
-
291
- }
292
-
293
-
294
-
295
- </script>
296
-
297
- </body>
298
-
299
- </html>