質問編集履歴

1

<code>を使ってソースコードを載せました

2020/04/14 13:03

投稿

maleon
maleon

スコア13

test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  ```
14
14
 
15
- ソースコード太字の箇所
15
+ ソースコード'addBom'関数の箇所
16
16
 
17
17
  なぜfor文とwhile文を併用するのか分かりません。
18
18
 
@@ -30,306 +30,312 @@
30
30
 
31
31
 
32
32
 
33
+
34
+
35
+ ``````javascript
36
+
37
+ <!DOCTYPE HTML>
38
+
39
+ <html>
40
+
41
+ <head>
42
+
43
+ <meta charset="UTF-8">
44
+
45
+ <meta name="viewport" content="width=device-width,initial-scale=1">
46
+
47
+ <title>デモ マインスイーパー</title>
48
+
49
+ <link href="https://fonts.googleapis.com/css?family=M+PLUS+1p:400,500" rel="stylesheet">
50
+
51
+ <link href="demo-minestyle.css" rel="stylesheet">
52
+
53
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
54
+
55
+
56
+
57
+ </head>
58
+
59
+
60
+
61
+ <body>
62
+
63
+ <div id="stage"></div>
64
+
65
+
66
+
67
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
68
+
69
+ <script>
70
+
71
+ 'use strict';
72
+
73
+
74
+
75
+ var bom = [9, 9, 10]; //[ブロックの行数,ブロックの列数,爆弾の数]
76
+
77
+ var bomPosi = []; //爆弾の位置を格納する配列
78
+
79
+ var gameFlg = true; //ゲームの進行状態 true/通常 false/ゲームオーバーorクリアー
80
+
81
+
82
+
83
+ //ブロックの追加
84
+
85
+ function addBlock(){
86
+
87
+ for(let i = 0; i < bom[0]*bom[1]; i++) {
88
+
89
+ $('<div></div>').appendTo('#stage');
90
+
91
+ }
92
+
93
+ }
94
+
95
+
96
+
97
+ //爆弾の配置
98
+
99
+ **function addBom(){
100
+
101
+ for(let i = 0; i < bom[2]; i++){
102
+
103
+ while(true){
104
+
105
+ var randomNum = Math.floor( Math.random() * (bom[0]*bom[1]+1) ); /* 0~81の中から乱数を取得 */
106
+
107
+ if(!bomPosi.includes(randomNum)){ //配列bomPosiにrandomNumが含まれていなければ
108
+
109
+ bomPosi.push(randomNum); //配列bomPosiにrandomNumを追加
110
+
111
+ $('#stage div').eq(randomNum).addClass('bomb');
112
+
113
+ break;
114
+
115
+ }
116
+
117
+ }
118
+
119
+ }
120
+
121
+ }**
122
+
123
+
124
+
125
+ //周囲の爆弾チェック
126
+
127
+ function checkBom(n){
128
+
129
+ var countBom = 0;
130
+
131
+
132
+
133
+ //一番左端でなければ
134
+
135
+ if(( n % bom[1] ) != 0){
136
+
137
+ //左チェック
138
+
139
+ if($('#stage div').eq(n-1).hasClass('bomb')){
140
+
141
+ countBom ++;
142
+
143
+ }
144
+
145
+ //一番上端でなければ
146
+
147
+ if( n >= bom[1]){
148
+
149
+ //左上チェック
150
+
151
+ if($('#stage div').eq(n-bom[1]-1).hasClass('bomb')){
152
+
153
+ countBom ++;
154
+
155
+ }
156
+
157
+ }
158
+
159
+ //左下チェック
160
+
161
+ if($('#stage div').eq(n+bom[1]-1).hasClass('bomb')){
162
+
163
+ countBom ++;
164
+
165
+ }
166
+
167
+ }
168
+
169
+ //一番右端でなければ
170
+
171
+ if(( n % bom[1] ) != bom[1]-1){
172
+
173
+ //右チェック
174
+
175
+ if($('#stage div').eq(n+1).hasClass('bomb')){
176
+
177
+ countBom ++;
178
+
179
+ }
180
+
181
+ //一番上端でなければ
182
+
183
+ if( n >= bom[1]){
184
+
185
+ //右上チェック
186
+
187
+ if($('#stage div').eq(n-bom[1]+1).hasClass('bomb')){
188
+
189
+ countBom ++;
190
+
191
+ }
192
+
193
+ }
194
+
195
+ //右下チェック
196
+
197
+ if($('#stage div').eq(n+bom[1]+1).hasClass('bomb')){
198
+
199
+ countBom ++;
200
+
201
+ }
202
+
203
+ }
204
+
205
+ //一番上端でなければ
206
+
207
+ if( n >= bom[1]){
208
+
209
+ //上チェック
210
+
211
+ if($('#stage div').eq(n-bom[1]).hasClass('bomb')){
212
+
213
+ countBom ++;
214
+
215
+ }
216
+
217
+ }
218
+
219
+ //下チェック
220
+
221
+ if($('#stage div').eq(n+bom[1]).hasClass('bomb')){
222
+
223
+ countBom ++;
224
+
225
+ }
226
+
227
+ return countBom;
228
+
229
+ }
230
+
231
+
232
+
233
+ //ゲームオーバー時の処理
234
+
235
+ function gameover(){
236
+
237
+ $('.bomb').html('<i class="fas fa-bomb"></i>'); //.bombのタイルに爆弾を表示させる
238
+
239
+ $('.bomb').css('background-color','#ffff00'); //.bombの背景色を変更
240
+
241
+ alert("ゲームオーバー!");
242
+
243
+ gameFlg = false; //ゲーム進行の変数をfalseに
244
+
245
+ }
246
+
247
+
248
+
249
+ //ゲームクリアーのチェック
250
+
251
+ function clearCheck(){
252
+
253
+ var cnt = $(".open").length; //現在開かれているタイル数を調べる
254
+
255
+ if(cnt >= (bom[0]*bom[1]-bom[2])) { //開かれているタイルが爆弾を除いたタイルの総数以上になったら
256
+
257
+ alert('クリアー!')
258
+
259
+ gameFlg = false; //ゲーム進行の変数をfalseに
260
+
261
+ }
262
+
263
+ }
264
+
265
+
266
+
267
+ $(function(){
268
+
269
+
270
+
271
+ $('#stage').width(bom[1] * 20); //ステージサイズの設定
272
+
273
+ addBlock(); //ブロック生成
274
+
275
+ addBom(); //爆弾のclass付与
276
+
277
+
278
+
279
+ //タイルをクリックしたら
280
+
281
+ $('#stage div').on("click", function(){
282
+
283
+ if(gameFlg == true){ //ゲームが進行状態ならば(ゲームオーバーorクリアー以外)
284
+
285
+ var index = $('#stage div').index(this); //クリックしたタイルの順番を取得
286
+
287
+ var countBom = checkBom(index); //周囲の爆弾数を調べcountBomに代入
288
+
289
+ $(this).addClass('open'); //クリックしたタイルに.openを付与
290
+
291
+ $(this).text(countBom); //タイルに周囲の爆弾数を表示
292
+
293
+ clearCheck(); //ゲームクリアーの判定
294
+
295
+ }
296
+
297
+ });
298
+
299
+
300
+
301
+ //爆弾のタイルをクリックしたら
302
+
303
+ $('.bomb').on("click", function(){
304
+
305
+ if(gameFlg == true){ //ゲームが進行状態ならば(ゲームオーバーorクリアー以外)
306
+
307
+ gameover(); //ゲームオーバーを実行
308
+
309
+ }
310
+
311
+ });
312
+
313
+ });
314
+
315
+
316
+
317
+ </script>
318
+
319
+
320
+
321
+ </body>
322
+
323
+ </html>
324
+
325
+ ```
326
+
327
+
328
+
329
+
330
+
331
+ ### 試したこと
332
+
333
+
334
+
335
+ 太字の箇所を下のコードのように記述しました。
336
+
33
337
  ```javaScript
34
338
 
35
- ```<!DOCTYPE HTML>
36
-
37
- <html>
38
-
39
- <head>
40
-
41
- <meta charset="UTF-8">
42
-
43
- <meta name="viewport" content="width=device-width,initial-scale=1">
44
-
45
- <title>デモ マインスイーパー</title>
46
-
47
- <link href="https://fonts.googleapis.com/css?family=M+PLUS+1p:400,500" rel="stylesheet">
48
-
49
- <link href="demo-minestyle.css" rel="stylesheet">
50
-
51
- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
52
-
53
-
54
-
55
- </head>
56
-
57
-
58
-
59
- <body>
60
-
61
- <div id="stage"></div>
62
-
63
-
64
-
65
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
66
-
67
- <script>
68
-
69
- 'use strict';
70
-
71
-
72
-
73
- var bom = [9, 9, 10]; //[ブロックの行数,ブロックの列数,爆弾の数]
74
-
75
- var bomPosi = []; //爆弾の位置を格納する配列
76
-
77
- var gameFlg = true; //ゲームの進行状態 true/通常 false/ゲームオーバーorクリアー
78
-
79
-
80
-
81
- //ブロックの追加
82
-
83
- function addBlock(){
84
-
85
- for(let i = 0; i < bom[0]*bom[1]; i++) {
86
-
87
- $('<div></div>').appendTo('#stage');
88
-
89
- }
90
-
91
- }
92
-
93
-
94
-
95
- //爆弾の配置
96
-
97
- **function addBom(){
98
-
99
- for(let i = 0; i < bom[2]; i++){
100
-
101
- while(true){
102
-
103
- var randomNum = Math.floor( Math.random() * (bom[0]*bom[1]+1) ); /* 0~81の中から乱数を取得 */
104
-
105
- if(!bomPosi.includes(randomNum)){ //配列bomPosiにrandomNumが含まれていなければ
106
-
107
- bomPosi.push(randomNum); //配列bomPosiにrandomNumを追加
108
-
109
- $('#stage div').eq(randomNum).addClass('bomb');
110
-
111
- break;
112
-
113
- }
114
-
115
- }
116
-
117
- }
118
-
119
- }**
120
-
121
-
122
-
123
- //周囲の爆弾チェック
124
-
125
- function checkBom(n){
126
-
127
- var countBom = 0;
128
-
129
-
130
-
131
- //一番左端でなければ
132
-
133
- if(( n % bom[1] ) != 0){
134
-
135
- //左チェック
136
-
137
- if($('#stage div').eq(n-1).hasClass('bomb')){
138
-
139
- countBom ++;
140
-
141
- }
142
-
143
- //一番上端でなければ
144
-
145
- if( n >= bom[1]){
146
-
147
- //左上チェック
148
-
149
- if($('#stage div').eq(n-bom[1]-1).hasClass('bomb')){
150
-
151
- countBom ++;
152
-
153
- }
154
-
155
- }
156
-
157
- //左下チェック
158
-
159
- if($('#stage div').eq(n+bom[1]-1).hasClass('bomb')){
160
-
161
- countBom ++;
162
-
163
- }
164
-
165
- }
166
-
167
- //一番右端でなければ
168
-
169
- if(( n % bom[1] ) != bom[1]-1){
170
-
171
- //右チェック
172
-
173
- if($('#stage div').eq(n+1).hasClass('bomb')){
174
-
175
- countBom ++;
176
-
177
- }
178
-
179
- //一番上端でなければ
180
-
181
- if( n >= bom[1]){
182
-
183
- //右上チェック
184
-
185
- if($('#stage div').eq(n-bom[1]+1).hasClass('bomb')){
186
-
187
- countBom ++;
188
-
189
- }
190
-
191
- }
192
-
193
- //右下チェック
194
-
195
- if($('#stage div').eq(n+bom[1]+1).hasClass('bomb')){
196
-
197
- countBom ++;
198
-
199
- }
200
-
201
- }
202
-
203
- //一番上端でなければ
204
-
205
- if( n >= bom[1]){
206
-
207
- //上チェック
208
-
209
- if($('#stage div').eq(n-bom[1]).hasClass('bomb')){
210
-
211
- countBom ++;
212
-
213
- }
214
-
215
- }
216
-
217
- //下チェック
218
-
219
- if($('#stage div').eq(n+bom[1]).hasClass('bomb')){
220
-
221
- countBom ++;
222
-
223
- }
224
-
225
- return countBom;
226
-
227
- }
228
-
229
-
230
-
231
- //ゲームオーバー時の処理
232
-
233
- function gameover(){
234
-
235
- $('.bomb').html('<i class="fas fa-bomb"></i>'); //.bombのタイルに爆弾を表示させる
236
-
237
- $('.bomb').css('background-color','#ffff00'); //.bombの背景色を変更
238
-
239
- alert("ゲームオーバー!");
240
-
241
- gameFlg = false; //ゲーム進行の変数をfalseに
242
-
243
- }
244
-
245
-
246
-
247
- //ゲームクリアーのチェック
248
-
249
- function clearCheck(){
250
-
251
- var cnt = $(".open").length; //現在開かれているタイル数を調べる
252
-
253
- if(cnt >= (bom[0]*bom[1]-bom[2])) { //開かれているタイルが爆弾を除いたタイルの総数以上になったら
254
-
255
- alert('クリアー!')
256
-
257
- gameFlg = false; //ゲーム進行の変数をfalseに
258
-
259
- }
260
-
261
- }
262
-
263
-
264
-
265
- $(function(){
266
-
267
-
268
-
269
- $('#stage').width(bom[1] * 20); //ステージサイズの設定
270
-
271
- addBlock(); //ブロック生成
272
-
273
- addBom(); //爆弾のclass付与
274
-
275
-
276
-
277
- //タイルをクリックしたら
278
-
279
- $('#stage div').on("click", function(){
280
-
281
- if(gameFlg == true){ //ゲームが進行状態ならば(ゲームオーバーorクリアー以外)
282
-
283
- var index = $('#stage div').index(this); //クリックしたタイルの順番を取得
284
-
285
- var countBom = checkBom(index); //周囲の爆弾数を調べcountBomに代入
286
-
287
- $(this).addClass('open'); //クリックしたタイルに.openを付与
288
-
289
- $(this).text(countBom); //タイルに周囲の爆弾数を表示
290
-
291
- clearCheck(); //ゲームクリアーの判定
292
-
293
- }
294
-
295
- });
296
-
297
-
298
-
299
- //爆弾のタイルをクリックしたら
300
-
301
- $('.bomb').on("click", function(){
302
-
303
- if(gameFlg == true){ //ゲームが進行状態ならば(ゲームオーバーorクリアー以外)
304
-
305
- gameover(); //ゲームオーバーを実行
306
-
307
- }
308
-
309
- });
310
-
311
- });
312
-
313
-
314
-
315
- </script>
316
-
317
-
318
-
319
- </body>
320
-
321
- </html>
322
-
323
-
324
-
325
-
326
-
327
- ### 試したこと
328
-
329
-
330
-
331
- 太字の箇所を下のコードのように記述しました。
332
-
333
339
  function addBom(){
334
340
 
335
341
  let i = 0;
@@ -352,6 +358,10 @@
352
358
 
353
359
  };
354
360
 
361
+ ```
362
+
363
+
364
+
355
365
 
356
366
 
357
367
  こうすると、爆弾が各マスに配置されません。