質問編集履歴
8
議題更新
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
###前提・実現したいこと
|
|
5
5
|
配列：10×10マス があり、下記の「◎」箇所にフラグが立ったら
|
|
6
6
|
次にその周囲、その次はそれのまた周囲…といったプログラムを作りたいのですが、
|
|
7
|
-
どのように書けば効率がよいのか皆目見当がつきません・・・
|
|
7
|
+
どのように書けば効率がよい（コードの簡潔さ・パフォーマンス）のか皆目見当がつきません・・・
|
|
8
8
|
|
|
9
9
|
何かアルゴリズムや効率の良い書き方をご存知の方、
|
|
10
10
|
どうかお知恵を貸してください。
|
7
コードの更新
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -55,11 +55,12 @@
|
|
|
55
55
|
###コード
|
|
56
56
|
|
|
57
57
|
下準備までで挫折してしまいました。
|
|
58
|
-
ここからどのようにして基準フラグの周囲、そのまた周囲を求めていけば良いのかがわかりません。。。
|
|
58
|
+
ここからどのようにして効率良く基準フラグの周囲、そのまた周囲を求めていけば良いのかがわかりません。。。
|
|
59
59
|
|
|
60
60
|
[https://codepen.io/bakemon-gogogo/pen/zEvObR](https://codepen.io/bakemon-gogogo/pen/zEvObR)
|
|
61
61
|
|
|
62
62
|
```html
|
|
63
|
+
|
|
63
64
|
<!DOCTYPE html>
|
|
64
65
|
<html lang="ja">
|
|
65
66
|
<head>
|
6
コードの更新
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -116,7 +116,7 @@
|
|
|
116
116
|
// 基準フラグの周囲を調査
|
|
117
117
|
function test (size) {
|
|
118
118
|
|
|
119
|
-
//
|
|
119
|
+
// 縦横最小・最大範囲4点を求める
|
|
120
120
|
var rect = {
|
|
121
121
|
xmin: set.row - size,
|
|
122
122
|
xmax: set.row + size,
|
|
@@ -124,11 +124,11 @@
|
|
|
124
124
|
ymax: set.col + size
|
|
125
125
|
};
|
|
126
126
|
|
|
127
|
-
// 基準フラグの周囲
|
|
127
|
+
// マップ全体から基準フラグの周囲を走査
|
|
128
128
|
for (var i=0; i<col; ++i) {
|
|
129
129
|
for (var j=0; j<row; ++j) {
|
|
130
130
|
|
|
131
|
-
//
|
|
131
|
+
// 該当するマス目にフラグ付与
|
|
132
132
|
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)) ? '◎' : '◯';
|
|
133
133
|
|
|
134
134
|
}
|
|
@@ -138,7 +138,7 @@
|
|
|
138
138
|
|
|
139
139
|
}
|
|
140
140
|
|
|
141
|
-
// フラグを検索
|
|
141
|
+
// マップ全体からフラグを検索
|
|
142
142
|
function check (string) {
|
|
143
143
|
|
|
144
144
|
for(var i in map){
|
5
コードの更新
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
下準備までで挫折してしまいました。
|
|
58
58
|
ここからどのようにして基準フラグの周囲、そのまた周囲を求めていけば良いのかがわかりません。。。
|
|
59
59
|
|
|
60
|
-
https://codepen.io/bakemon-gogogo/pen/zEvObR
|
|
60
|
+
[https://codepen.io/bakemon-gogogo/pen/zEvObR](https://codepen.io/bakemon-gogogo/pen/zEvObR)
|
|
61
61
|
|
|
62
62
|
```html
|
|
63
63
|
<!DOCTYPE html>
|
|
@@ -66,14 +66,14 @@
|
|
|
66
66
|
<meta charset="utf-8">
|
|
67
67
|
<style>
|
|
68
68
|
body {
|
|
69
|
-
|
|
69
|
+
text-align: center;
|
|
70
|
-
|
|
70
|
+
cursor: pointer;
|
|
71
71
|
}
|
|
72
72
|
div {
|
|
73
|
-
|
|
73
|
+
margin: 50px auto;
|
|
74
|
-
|
|
74
|
+
font-size: 30px;
|
|
75
|
-
|
|
75
|
+
letter-spacing: .5em;
|
|
76
|
-
|
|
76
|
+
user-select: none;
|
|
77
77
|
}
|
|
78
78
|
</style>
|
|
79
79
|
<script>
|
|
@@ -85,8 +85,8 @@
|
|
|
85
85
|
col: 5, // 基準フラグの位置：6列目
|
|
86
86
|
row: 3 // 基準フラグの位置：4行目
|
|
87
87
|
};
|
|
88
|
-
var count = 0;
|
|
88
|
+
var count = 0;
|
|
89
|
-
var wrap;
|
|
89
|
+
var wrap;
|
|
90
90
|
|
|
91
91
|
// 初期化
|
|
92
92
|
function init () {
|
|
@@ -103,23 +103,25 @@
|
|
|
103
103
|
}
|
|
104
104
|
}
|
|
105
105
|
|
|
106
|
-
test(
|
|
106
|
+
test(count);
|
|
107
107
|
|
|
108
|
+
// クリックイベント
|
|
108
109
|
window.addEventListener('click', function() {
|
|
110
|
+
count = check('◎') ? (count + 1) : 0;
|
|
109
|
-
test(
|
|
111
|
+
test(count);
|
|
110
112
|
});
|
|
111
113
|
|
|
112
114
|
}
|
|
113
115
|
|
|
114
116
|
// 基準フラグの周囲を調査
|
|
115
|
-
function test (
|
|
117
|
+
function test (size) {
|
|
116
118
|
|
|
117
119
|
// 基準フラグから縦横の最小・最大範囲を求める
|
|
118
|
-
var
|
|
120
|
+
var rect = {
|
|
119
|
-
xmin: set.row -
|
|
121
|
+
xmin: set.row - size,
|
|
120
|
-
xmax: set.row +
|
|
122
|
+
xmax: set.row + size,
|
|
121
|
-
ymin: set.col -
|
|
123
|
+
ymin: set.col - size,
|
|
122
|
-
ymax: set.col +
|
|
124
|
+
ymax: set.col + size
|
|
123
125
|
};
|
|
124
126
|
|
|
125
127
|
// 基準フラグの周囲にフラグ付与
|
|
@@ -127,11 +129,7 @@
|
|
|
127
129
|
for (var j=0; j<row; ++j) {
|
|
128
130
|
|
|
129
131
|
// 範囲に収まるマス目にフラグ付与
|
|
130
|
-
if (target.ymin < i && i < target.ymax) {
|
|
131
|
-
if (target.xmin < j && j < target.xmax) {
|
|
132
|
-
|
|
132
|
+
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)) ? '◎' : '◯';
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
133
|
|
|
136
134
|
}
|
|
137
135
|
}
|
|
@@ -140,6 +138,21 @@
|
|
|
140
138
|
|
|
141
139
|
}
|
|
142
140
|
|
|
141
|
+
// フラグを検索
|
|
142
|
+
function check (string) {
|
|
143
|
+
|
|
144
|
+
for(var i in map){
|
|
145
|
+
for(var j in map[i]){
|
|
146
|
+
if (map[i][j] == string) {
|
|
147
|
+
return true;
|
|
148
|
+
break;
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
return false;
|
|
153
|
+
|
|
154
|
+
}
|
|
155
|
+
|
|
143
156
|
// HTMLに描画
|
|
144
157
|
function draw () {
|
|
145
158
|
|
|
@@ -161,4 +174,5 @@
|
|
|
161
174
|
</script>
|
|
162
175
|
</head><body></body></html>
|
|
163
176
|
|
|
177
|
+
|
|
164
178
|
```
|
4
codepen\.ioのURL貼りました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -53,8 +53,12 @@
|
|
|
53
53
|
|
|
54
54
|
|
|
55
55
|
###コード
|
|
56
|
+
|
|
56
57
|
下準備までで挫折してしまいました。
|
|
57
58
|
ここからどのようにして基準フラグの周囲、そのまた周囲を求めていけば良いのかがわかりません。。。
|
|
59
|
+
|
|
60
|
+
https://codepen.io/bakemon-gogogo/pen/zEvObR
|
|
61
|
+
|
|
58
62
|
```html
|
|
59
63
|
<!DOCTYPE html>
|
|
60
64
|
<html lang="ja">
|
3
途中のコード
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -55,23 +55,106 @@
|
|
|
55
55
|
###コード
|
|
56
56
|
下準備までで挫折してしまいました。
|
|
57
57
|
ここからどのようにして基準フラグの周囲、そのまた周囲を求めていけば良いのかがわかりません。。。
|
|
58
|
+
```html
|
|
59
|
+
<!DOCTYPE html>
|
|
60
|
+
<html lang="ja">
|
|
61
|
+
<head>
|
|
62
|
+
<meta charset="utf-8">
|
|
63
|
+
<style>
|
|
64
|
+
body {
|
|
65
|
+
text-align: center;
|
|
66
|
+
cursor: pointer;
|
|
67
|
+
}
|
|
68
|
+
div {
|
|
69
|
+
margin: 50px auto;
|
|
70
|
+
font-size: 30px;
|
|
71
|
+
letter-spacing: .5em;
|
|
72
|
+
user-select: none;
|
|
73
|
+
}
|
|
74
|
+
</style>
|
|
58
|
-
|
|
75
|
+
<script>
|
|
76
|
+
|
|
59
|
-
var
|
|
77
|
+
var map = [];
|
|
60
|
-
var col = 10; // 列
|
|
78
|
+
var col = 10; // マップ：列
|
|
61
|
-
var row = 10; // 行
|
|
79
|
+
var row = 10; // マップ：行
|
|
62
|
-
var
|
|
80
|
+
var set = {
|
|
63
|
-
|
|
81
|
+
col: 5, // 基準フラグの位置：6列目
|
|
64
|
-
|
|
82
|
+
row: 3 // 基準フラグの位置：4行目
|
|
65
83
|
};
|
|
84
|
+
var count = 0; // カウント
|
|
85
|
+
var wrap; //
|
|
66
86
|
|
|
87
|
+
// 初期化
|
|
88
|
+
function init () {
|
|
89
|
+
|
|
90
|
+
// HTML出力枠 生成
|
|
91
|
+
wrap = document.createElement('div');
|
|
92
|
+
document.body.appendChild(wrap);
|
|
93
|
+
|
|
67
|
-
// 配列のマップ生成（
|
|
94
|
+
// 配列のマップ生成（縦×横：10マス）
|
|
68
|
-
for (var i=0; i<col; ++i) {
|
|
95
|
+
for (var i=0; i<col; ++i) {
|
|
69
|
-
|
|
96
|
+
map[i] = [];
|
|
70
|
-
|
|
97
|
+
for (var j=0; j<row; ++j) {
|
|
71
|
-
|
|
98
|
+
map[i][j] = '◯';
|
|
99
|
+
}
|
|
72
100
|
}
|
|
101
|
+
|
|
102
|
+
test(++count);
|
|
103
|
+
|
|
104
|
+
window.addEventListener('click', function() {
|
|
105
|
+
test(++count);
|
|
106
|
+
});
|
|
107
|
+
|
|
73
108
|
}
|
|
74
109
|
|
|
110
|
+
// 基準フラグの周囲を調査
|
|
75
|
-
|
|
111
|
+
function test (num) {
|
|
76
112
|
|
|
113
|
+
// 基準フラグから縦横の最小・最大範囲を求める
|
|
114
|
+
var target = {
|
|
115
|
+
xmin: set.row - num,
|
|
116
|
+
xmax: set.row + num,
|
|
117
|
+
ymin: set.col - num,
|
|
118
|
+
ymax: set.col + num
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
// 基準フラグの周囲にフラグ付与
|
|
122
|
+
for (var i=0; i<col; ++i) {
|
|
123
|
+
for (var j=0; j<row; ++j) {
|
|
124
|
+
|
|
125
|
+
// 範囲に収まるマス目にフラグ付与
|
|
126
|
+
if (target.ymin < i && i < target.ymax) {
|
|
127
|
+
if (target.xmin < j && j < target.xmax) {
|
|
128
|
+
map[i][j] = map[i][j] === '◯' ? '◎' : '◯';
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
draw();
|
|
136
|
+
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
// HTMLに描画
|
|
140
|
+
function draw () {
|
|
141
|
+
|
|
142
|
+
var html = '';
|
|
143
|
+
|
|
144
|
+
for (var i=0, l=map.length; i<l; ++i) {
|
|
145
|
+
for (var j=0, m=map[i].length; j<m; ++j) {
|
|
146
|
+
html += map[i][j];
|
|
147
|
+
}
|
|
148
|
+
html += '<br>';
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
wrap.innerHTML = html;
|
|
152
|
+
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
document.addEventListener('DOMContentLoaded', init);
|
|
156
|
+
|
|
157
|
+
</script>
|
|
158
|
+
</head><body></body></html>
|
|
159
|
+
|
|
77
160
|
```
|
2
コードの訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -60,8 +60,8 @@
|
|
|
60
60
|
var col = 10; // 列
|
|
61
61
|
var row = 10; // 行
|
|
62
62
|
var hit = {
|
|
63
|
-
col:
|
|
63
|
+
col: 5, // 基準となるフラグの位置：6列目
|
|
64
|
-
row:
|
|
64
|
+
row: 3 // 基準となるフラグの位置：4行目
|
|
65
65
|
};
|
|
66
66
|
|
|
67
67
|
// 配列のマップ生成（6列目4行目、基準フラグも付与）
|
1
途中（下準備）までのコードを掲載いたしました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -49,4 +49,29 @@
|
|
|
49
49
|
◯◎◎◎◎◎◯◯◯◯
|
|
50
50
|
◯◯◯◯◯◯◯◯◯◯
|
|
51
51
|
◯◯◯◯◯◯◯◯◯◯
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
###コード
|
|
56
|
+
下準備までで挫折してしまいました。
|
|
57
|
+
ここからどのようにして基準フラグの周囲、そのまた周囲を求めていけば良いのかがわかりません。。。
|
|
58
|
+
```javascript
|
|
59
|
+
var arr = [];
|
|
60
|
+
var col = 10; // 列
|
|
61
|
+
var row = 10; // 行
|
|
62
|
+
var hit = {
|
|
63
|
+
col: 6, // 基準となるフラグの位置：列
|
|
64
|
+
row: 4 // 基準となるフラグの位置：行
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
// 配列のマップ生成（6列目4行目、基準フラグも付与）
|
|
68
|
+
for (var i=0; i<col; ++i) {
|
|
69
|
+
arr[i] = [];
|
|
70
|
+
for (var j=0; j<row; ++j) {
|
|
71
|
+
arr[i][j] = (i == hit.col && j == hit.row) ? true : false;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
console.dir(arr);
|
|
76
|
+
|
|
52
77
|
```
|