teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問javascript：スライドパズルゲームのリセット時にパズルがシャッフルされない

編集履歴

質問編集履歴

2

コードの修正

2019/07/19 13:44

投稿

k373
k373

スコア17

test CHANGED
File without changes
test CHANGED
@@ -18,7 +18,53 @@
18
18
 
19
19
  ```javascript
20
20
 
21
+ <!DOCTYPE html>
22
+
23
+ <html lang="ja" dir="ltr">
24
+
25
+ <head>
26
+
27
+ <meta charset="utf-8">
28
+
29
+ <title>16 puzzles</title>
30
+
31
+ <style>
32
+
33
+ .tile{
34
+
35
+ width:100px;
36
+
37
+ height:100px;
38
+
39
+ border:1px solid #ccc;
40
+
41
+ border-radius:10px;
42
+
43
+ text-align:center;
44
+
45
+ font-size:36px;
46
+
47
+ background-color:white;
48
+
49
+ box-shadow:rgb(128, 128, 128) 5px 5px;
50
+
51
+ }
52
+
53
+ .over{
54
+
55
+ pointer-events: none;
56
+
57
+ background-color: #ff0000;
58
+
59
+ color:#fff;
60
+
61
+ }
62
+
63
+ </style>
64
+
65
+ </head>
66
+
21
- <body onload="init()">
67
+ <body onload="init()">
22
68
 
23
69
  <div id="score">0</div>
24
70
 
@@ -26,7 +72,7 @@
26
72
 
27
73
  <table id="table"></table>
28
74
 
29
- <div id="reset" onclick="init()">RESET</div> //リセットボタンをクリックしてもパズルがシャッフルされない！！
75
+ <div id="reset" onclick="init()">RESET</div>
30
76
 
31
77
  <script>
32
78
 
@@ -88,7 +134,7 @@
88
134
 
89
135
  td.index = index;
90
136
 
91
- td.textContent = index == 0 ? "" : index; /
137
+ td.textContent = index == 0 ? "" : index; //indexが0なら空でその他はその数字を代入
92
138
 
93
139
  tiles.push(td);
94
140
 
@@ -100,17 +146,211 @@
100
146
 
101
147
  }
102
148
 
103
- //以下パズルをシャッフルするための関数
104
-
105
149
  for(var i = 0; i < 1000; i++){
106
150
 
107
- console.log(i);
108
-
109
- clickrandom({srcElement: {index: Math.floor(Math.random() * 16)}})
151
+ clickrandom({srcElement: {index: Math.floor(Math.random() * 16)}}) //e.srcElement.indexのように、srcElementプロパティのindexプロパティ
110
-
152
+
111
- }
153
+ }
112
-
154
+
113
- }
155
+ }
156
+
157
+
158
+
159
+
160
+
161
+ function countdown(){
162
+
163
+ if(time > 0){
164
+
165
+ var min = Math.floor(time/60);
166
+
167
+ var sec = time % 60;
168
+
169
+ time--;
170
+
171
+ console.log(time);
172
+
173
+ timeoutId = setTimeout(countdown, 1000);
174
+
175
+ timer.innerHTML = `${String(min).padStart(2, '0')}:${String(sec).padStart(2, '0')}`;
176
+
177
+ finish();
178
+
179
+ }else{
180
+
181
+ timer.innerHTML = "TIME UP!";
182
+
183
+ scoredata();
184
+
185
+ clearTimeout(timeoutId);
186
+
187
+ var tileElem = document.getElementsByClassName("tile")
188
+
189
+ Array.prototype.forEach.call(tileElem, function(element){
190
+
191
+ element.classList.add("over");
192
+
193
+ });
194
+
195
+ }
196
+
197
+ }
198
+
199
+
200
+
201
+ var first = true;//startTimerの外でtrueにしないとダメ。中だと都度呼び出されてしまう。
202
+
203
+ function startTimer(){
204
+
205
+ if(first){
206
+
207
+ countdown();
208
+
209
+ }
210
+
211
+ first = false;
212
+
213
+ }
214
+
215
+
216
+
217
+ function clickrandom(e){
218
+
219
+ var i = e.srcElement.index;
220
+
221
+
222
+
223
+ if(i - 4 >= 0 && tiles[i - 4].value == 0){ //一番上の行ではなく、上にあるマスの値が0の時
224
+
225
+ swap(i, i - 4);
226
+
227
+ }else if(i + 4 < 16 && tiles[i + 4].value == 0){ //一番下の行ではなく、下にあるマスの値が0の時
228
+
229
+ swap(i, i + 4);
230
+
231
+ }else if(i % 4 != 0 && tiles[i - 1].value == 0){ //一番下の行ではなく、下にあるマスの値が0の時
232
+
233
+ swap(i, i - 1);
234
+
235
+ }else if(i % 4 != 3 && tiles[i + 1].value == 0){ //一番下の行ではなく、下にあるマスの値が0の時
236
+
237
+ swap(i, i + 1);
238
+
239
+ }
240
+
241
+
242
+
243
+ }
244
+
245
+
246
+
247
+ function click(e){
248
+
249
+ var i = e.srcElement.index;
250
+
251
+
252
+
253
+ if(i - 4 >= 0 && tiles[i - 4].value == 0){ //一番上の行ではなく、上にあるマスの値が0の時
254
+
255
+ swap(i, i - 4);
256
+
257
+ startTimer();
258
+
259
+ clickcount++;
260
+
261
+ }else if(i + 4 < 16 && tiles[i + 4].value == 0){ //一番下の行ではなく、下にあるマスの値が0の時
262
+
263
+ swap(i, i + 4);
264
+
265
+ startTimer();
266
+
267
+ clickcount++;
268
+
269
+ }else if(i % 4 != 0 && tiles[i - 1].value == 0){ //一番下の行ではなく、下にあるマスの値が0の時
270
+
271
+ swap(i, i - 1);
272
+
273
+ startTimer();
274
+
275
+ clickcount++;
276
+
277
+ }else if(i % 4 != 3 && tiles[i + 1].value == 0){ //一番下の行ではなく、下にあるマスの値が0の時
278
+
279
+ swap(i, i + 1);
280
+
281
+ startTimer();
282
+
283
+ clickcount++;
284
+
285
+ }
286
+
287
+ }
288
+
289
+
290
+
291
+ function swap(i,j){
292
+
293
+ var tmp = tiles[i].value; //先にiの値をtmpに代入
294
+
295
+ tiles[i].textContent = tiles[j].textContent; //iにjを代入
296
+
297
+ tiles[i].value = tiles[j].value; //iにjを代入
298
+
299
+ tiles[j].textContent = tmp; //jにiを代入
300
+
301
+ tiles[j].value = tmp; //jにiを代入
302
+
303
+ }
304
+
305
+
306
+
307
+ function scoredata(){
308
+
309
+ var scoreCount = time * 100 + 200 - clickcount * 10;
310
+
311
+ score.textContent = scoreCount;
312
+
313
+ }
314
+
315
+
316
+
317
+ function finish(){//クリア判定
318
+
319
+ var clear = 0;
320
+
321
+ for(var i = 0; i < 16; i++){//16枚のタイルを判定
322
+
323
+ if(tiles[i].value == i){
324
+
325
+ clear++//タイルの場所とその数字が同じ場合はポイント追加
326
+
327
+ }
328
+
329
+ }
330
+
331
+ console.log(clear);
332
+
333
+ if(clear == 16){//ポイントが16（つまり全部一致）になったらクリア！
334
+
335
+ clearTimeout(timeoutId);　
336
+
337
+ timer.innerHTML = "FINISH!";
338
+
339
+ scoredata();
340
+
341
+ }
342
+
343
+ }
344
+
345
+
346
+
347
+ </script>
348
+
349
+ </body>
350
+
351
+ </html>
352
+
353
+
114
354
 
115
355
  ```
116
356
 

1

説明の追加

2019/07/19 13:44

投稿

k373
k373

スコア17

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  ■解決したいこと
2
2
 
3
- スライドパズルゲームを勉強で作っています。
3
+ 16マスのスライドパズルゲームを勉強で作っています。
4
4
 
5
5
  body onloadで、パズルがランダムにシャッフルされるようにinit()関数内に書いています。
6
6
 
@@ -9,6 +9,8 @@
9
9
 
10
10
 
11
11
  しかし、設置したresetボタンに同じinit関数をonclickで呼び出せるようにし、呼び出すとなぜかパズルがシャッフルされません。
12
+
13
+ 綺麗に1から15までの数字が順番に並んでしまいます。
12
14
 
13
15
  リセット時もシャッフル機能を問題なく動作させたいです。
14
16