teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問配列で特定位置の周囲の値を効率よく調べたい アルゴリズム

編集履歴

質問編集履歴

8

議題更新

2017/09/16 14:30

投稿

bakemon-gogogo
bakemon-gogogo

スコア14

test CHANGED
File without changes
test CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  次にその周囲、その次はそれのまた周囲…といったプログラムを作りたいのですが、
12
12
 
13
- どのように書けば効率がよいのか皆目見当がつきません・・・
13
+ どのように書けば効率がよい（コードの簡潔さ・パフォーマンス）のか皆目見当がつきません・・・
14
14
 
15
15
 
16
16
 

7

コードの更新

2017/09/16 14:29

投稿

bakemon-gogogo
bakemon-gogogo

スコア14

test CHANGED
File without changes
test CHANGED
@@ -112,7 +112,7 @@
112
112
 
113
113
  下準備までで挫折してしまいました。
114
114
 
115
- ここからどのようにして基準フラグの周囲、そのまた周囲を求めていけば良いのかがわかりません。。。
115
+ ここからどのようにして効率良く基準フラグの周囲、そのまた周囲を求めていけば良いのかがわかりません。。。
116
116
 
117
117
 
118
118
 
@@ -122,6 +122,8 @@
122
122
 
123
123
  ```html
124
124
 
125
+
126
+
125
127
  <!DOCTYPE html>
126
128
 
127
129
  <html lang="ja">

6

コードの更新

2017/09/16 10:04

投稿

bakemon-gogogo
bakemon-gogogo

スコア14

test CHANGED
File without changes
test CHANGED
@@ -234,7 +234,7 @@
234
234
 
235
235
 
236
236
 
237
- // 基準フラグから縦横の最小・最大範囲を求める
237
+ // 縦横最小・最大範囲4点を求める
238
238
 
239
239
  var rect = {
240
240
 
@@ -250,7 +250,7 @@
250
250
 
251
251
 
252
252
 
253
- // 基準フラグの周囲にフラグ付与
253
+ // マップ全体から基準フラグの周囲を走査
254
254
 
255
255
  for (var i=0; i<col; ++i) {
256
256
 
@@ -258,7 +258,7 @@
258
258
 
259
259
 
260
260
 
261
- // 範囲に収まるマス目にフラグ付与
261
+ // 該当するマス目にフラグ付与
262
262
 
263
263
  map[i][j] = ((j == rect.xmin || j == rect.xmax) && (rect.ymin <= i && i <= rect.ymax)) || ((i == rect.ymin || i == rect.ymax) && (rect.xmin <= j && j <= rect.xmax)) ? '◎' : '◯';
264
264
 
@@ -278,7 +278,7 @@
278
278
 
279
279
 
280
280
 
281
- // フラグを検索
281
+ // マップ全体からフラグを検索
282
282
 
283
283
  function check (string) {
284
284
 

5

コードの更新

2017/09/16 10:01

投稿

bakemon-gogogo
bakemon-gogogo

スコア14

test CHANGED
File without changes
test CHANGED
@@ -116,7 +116,7 @@
116
116
 
117
117
 
118
118
 
119
- https://codepen.io/bakemon-gogogo/pen/zEvObR
119
+ [https://codepen.io/bakemon-gogogo/pen/zEvObR](https://codepen.io/bakemon-gogogo/pen/zEvObR)
120
120
 
121
121
 
122
122
 
@@ -134,21 +134,21 @@
134
134
 
135
135
  body {
136
136
 
137
- text-align: center;
137
+ text-align: center;
138
-
138
+
139
- cursor: pointer;
139
+ cursor: pointer;
140
140
 
141
141
  }
142
142
 
143
143
  div {
144
144
 
145
- margin: 50px auto;
145
+ margin: 50px auto;
146
-
146
+
147
- font-size: 30px;
147
+ font-size: 30px;
148
-
148
+
149
- letter-spacing: .5em;
149
+ letter-spacing: .5em;
150
-
150
+
151
- user-select: none;
151
+ user-select: none;
152
152
 
153
153
  }
154
154
 
@@ -172,9 +172,9 @@
172
172
 
173
173
  };
174
174
 
175
- var count = 0; // カウント
175
+ var count = 0;
176
-
176
+
177
- var wrap; //
177
+ var wrap;
178
178
 
179
179
 
180
180
 
@@ -208,13 +208,17 @@
208
208
 
209
209
 
210
210
 
211
- test(++count);
211
+ test(count);
212
+
213
+
214
+
212
-
215
+ // クリックイベント
213
-
214
216
 
215
217
  window.addEventListener('click', function() {
216
218
 
219
+ count = check('◎') ? (count + 1) : 0;
220
+
217
- test(++count);
221
+ test(count);
218
222
 
219
223
  });
220
224
 
@@ -226,21 +230,21 @@
226
230
 
227
231
  // 基準フラグの周囲を調査
228
232
 
229
- function test (num) {
233
+ function test (size) {
230
234
 
231
235
 
232
236
 
233
237
  // 基準フラグから縦横の最小・最大範囲を求める
234
238
 
235
- var target = {
239
+ var rect = {
236
-
240
+
237
- xmin: set.row - num,
241
+ xmin: set.row - size,
238
-
242
+
239
- xmax: set.row + num,
243
+ xmax: set.row + size,
240
-
244
+
241
- ymin: set.col - num,
245
+ ymin: set.col - size,
242
-
246
+
243
- ymax: set.col + num
247
+ ymax: set.col + size
244
248
 
245
249
  };
246
250
 
@@ -256,25 +260,47 @@
256
260
 
257
261
  // 範囲に収まるマス目にフラグ付与
258
262
 
259
- if (target.ymin < i && i < target.ymax) {
260
-
261
- if (target.xmin < j && j < target.xmax) {
262
-
263
- map[i][j] = map[i][j] === '◯' ? '◎' : '◯';
263
+ map[i][j] = ((j == rect.xmin || j == rect.xmax) && (rect.ymin <= i && i <= rect.ymax)) || ((i == rect.ymin || i == rect.ymax) && (rect.xmin <= j && j <= rect.xmax)) ? '◎' : '◯';
264
-
264
+
265
+
266
+
265
- }
267
+ }
268
+
269
+ }
270
+
271
+
272
+
273
+ draw();
274
+
275
+
276
+
277
+ }
278
+
279
+
280
+
281
+ // フラグを検索
282
+
283
+ function check (string) {
284
+
285
+
286
+
287
+ for(var i in map){
288
+
289
+ for(var j in map[i]){
290
+
291
+ if (map[i][j] == string) {
292
+
293
+ return true;
294
+
295
+ break;
266
296
 
267
297
  }
268
298
 
269
-
270
-
271
299
  }
272
300
 
273
301
  }
274
302
 
275
-
276
-
277
- draw();
303
+ return false;
278
304
 
279
305
 
280
306
 
@@ -324,4 +350,6 @@
324
350
 
325
351
 
326
352
 
353
+
354
+
327
355
  ```

4

codepen\.ioのURL貼りました

2017/09/16 09:15

投稿

bakemon-gogogo
bakemon-gogogo

スコア14

test CHANGED
File without changes
test CHANGED
@@ -108,10 +108,18 @@
108
108
 
109
109
  ###コード
110
110
 
111
+
112
+
111
113
  下準備までで挫折してしまいました。
112
114
 
113
115
  ここからどのようにして基準フラグの周囲、そのまた周囲を求めていけば良いのかがわかりません。。。
114
116
 
117
+
118
+
119
+ https://codepen.io/bakemon-gogogo/pen/zEvObR
120
+
121
+
122
+
115
123
  ```html
116
124
 
117
125
  <!DOCTYPE html>

3

途中のコード

2017/09/16 06:20

投稿

bakemon-gogogo
bakemon-gogogo

スコア14

test CHANGED
File without changes
test CHANGED
@@ -112,41 +112,207 @@
112
112
 
113
113
  ここからどのようにして基準フラグの周囲、そのまた周囲を求めていけば良いのかがわかりません。。。
114
114
 
115
+ ```html
116
+
117
+ <!DOCTYPE html>
118
+
119
+ <html lang="ja">
120
+
121
+ <head>
122
+
123
+ <meta charset="utf-8">
124
+
125
+ <style>
126
+
127
+ body {
128
+
129
+ text-align: center;
130
+
131
+ cursor: pointer;
132
+
133
+ }
134
+
135
+ div {
136
+
137
+ margin: 50px auto;
138
+
139
+ font-size: 30px;
140
+
141
+ letter-spacing: .5em;
142
+
143
+ user-select: none;
144
+
145
+ }
146
+
147
+ </style>
148
+
115
- ```javascript
149
+ <script>
116
-
150
+
151
+
152
+
117
- var arr = [];
153
+ var map = [];
118
-
154
+
119
- var col = 10; // 列
155
+ var col = 10; // マップ：列
120
-
156
+
121
- var row = 10; // 行
157
+ var row = 10; // マップ：行
122
-
158
+
123
- var hit = {
159
+ var set = {
124
-
160
+
125
- col: 5, // 基準となるフラグの位置：6列目
161
+ col: 5, // 基準フラグの位置：6列目
126
-
162
+
127
- row: 3 // 基準となるフラグの位置：4行目
163
+ row: 3 // 基準フラグの位置：4行目
128
164
 
129
165
  };
130
166
 
131
-
167
+ var count = 0; // カウント
168
+
132
-
169
+ var wrap; //
170
+
171
+
172
+
173
+ // 初期化
174
+
175
+ function init () {
176
+
177
+
178
+
179
+ // HTML出力枠 生成
180
+
181
+ wrap = document.createElement('div');
182
+
183
+ document.body.appendChild(wrap);
184
+
185
+
186
+
133
- // 配列のマップ生成（6列目4行目、基準フラグも付与）
187
+ // 配列のマップ生成（縦×横：10マス）
134
-
188
+
135
- for (var i=0; i<col; ++i) {
189
+ for (var i=0; i<col; ++i) {
136
-
190
+
137
- arr[i] = [];
191
+ map[i] = [];
138
-
192
+
139
- for (var j=0; j<row; ++j) {
193
+ for (var j=0; j<row; ++j) {
140
-
194
+
141
- arr[i][j] = (i == hit.col && j == hit.row) ? true : false;
195
+ map[i][j] = '◯';
196
+
197
+ }
142
198
 
143
199
  }
144
200
 
201
+
202
+
203
+ test(++count);
204
+
205
+
206
+
207
+ window.addEventListener('click', function() {
208
+
209
+ test(++count);
210
+
211
+ });
212
+
213
+
214
+
145
- }
215
+ }
216
+
217
+
218
+
146
-
219
+ // 基準フラグの周囲を調査
220
+
147
-
221
+ function test (num) {
222
+
223
+
224
+
148
-
225
+ // 基準フラグから縦横の最小・最大範囲を求める
226
+
227
+ var target = {
228
+
229
+ xmin: set.row - num,
230
+
231
+ xmax: set.row + num,
232
+
233
+ ymin: set.col - num,
234
+
235
+ ymax: set.col + num
236
+
237
+ };
238
+
239
+
240
+
241
+ // 基準フラグの周囲にフラグ付与
242
+
243
+ for (var i=0; i<col; ++i) {
244
+
245
+ for (var j=0; j<row; ++j) {
246
+
247
+
248
+
249
+ // 範囲に収まるマス目にフラグ付与
250
+
251
+ if (target.ymin < i && i < target.ymax) {
252
+
253
+ if (target.xmin < j && j < target.xmax) {
254
+
255
+ map[i][j] = map[i][j] === '◯' ? '◎' : '◯';
256
+
257
+ }
258
+
259
+ }
260
+
261
+
262
+
263
+ }
264
+
265
+ }
266
+
267
+
268
+
269
+ draw();
270
+
271
+
272
+
273
+ }
274
+
275
+
276
+
277
+ // HTMLに描画
278
+
149
- console.dir(arr);
279
+ function draw () {
280
+
281
+
282
+
283
+ var html = '';
284
+
285
+
286
+
287
+ for (var i=0, l=map.length; i<l; ++i) {
288
+
289
+ for (var j=0, m=map[i].length; j<m; ++j) {
290
+
291
+ html += map[i][j];
292
+
293
+ }
294
+
295
+ html += '<br>';
296
+
297
+ }
298
+
299
+
300
+
301
+ wrap.innerHTML = html;
302
+
303
+
304
+
305
+ }
306
+
307
+
308
+
309
+ document.addEventListener('DOMContentLoaded', init);
310
+
311
+
312
+
313
+ </script>
314
+
315
+ </head><body></body></html>
150
316
 
151
317
 
152
318
 

2

コードの訂正

2017/09/16 06:08

投稿

bakemon-gogogo
bakemon-gogogo

スコア14

test CHANGED
File without changes
test CHANGED
@@ -122,9 +122,9 @@
122
122
 
123
123
  var hit = {
124
124
 
125
- col: 6, // 基準となるフラグの位置：列
125
+ col: 5, // 基準となるフラグの位置：6列目
126
126
 
127
- row: 4 // 基準となるフラグの位置：行
127
+ row: 3 // 基準となるフラグの位置：4行目
128
128
 
129
129
  };
130
130
 

1

途中（下準備）までのコードを掲載いたしました。

2017/09/16 03:44

投稿

bakemon-gogogo
bakemon-gogogo

スコア14

test CHANGED
File without changes
test CHANGED
@@ -101,3 +101,53 @@
101
101
  ◯◯◯◯◯◯◯◯◯◯
102
102
 
103
103
  ```
104
+
105
+
106
+
107
+
108
+
109
+ ###コード
110
+
111
+ 下準備までで挫折してしまいました。
112
+
113
+ ここからどのようにして基準フラグの周囲、そのまた周囲を求めていけば良いのかがわかりません。。。
114
+
115
+ ```javascript
116
+
117
+ var arr = [];
118
+
119
+ var col = 10; // 列
120
+
121
+ var row = 10; // 行
122
+
123
+ var hit = {
124
+
125
+ col: 6, // 基準となるフラグの位置：列
126
+
127
+ row: 4 // 基準となるフラグの位置：行
128
+
129
+ };
130
+
131
+
132
+
133
+ // 配列のマップ生成（6列目4行目、基準フラグも付与）
134
+
135
+ for (var i=0; i<col; ++i) {
136
+
137
+ arr[i] = [];
138
+
139
+ for (var j=0; j<row; ++j) {
140
+
141
+ arr[i][j] = (i == hit.col && j == hit.row) ? true : false;
142
+
143
+ }
144
+
145
+ }
146
+
147
+
148
+
149
+ console.dir(arr);
150
+
151
+
152
+
153
+ ```