teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問JavaScript スロットマシンでコインを取得したい

編集履歴

質問編集履歴

2

HTML,CSSのコードを追加しました。

2020/05/10 13:05

投稿

mu_tin
mu_tin

スコア1

test CHANGED
File without changes
test CHANGED
@@ -48,6 +48,188 @@
48
48
 
49
49
  ### 該当のソースコード
50
50
 
51
+ ```HTML
52
+
53
+ <!DOCTYPE html>
54
+
55
+ <html lang="ja">
56
+
57
+ <head>
58
+
59
+ <meta charset="utf-8">
60
+
61
+ <title>Slot Machine</title>
62
+
63
+ <link rel="stylesheet" href="css/styles.css">
64
+
65
+
66
+
67
+ </head>
68
+
69
+ <body>
70
+
71
+ <main></main>
72
+
73
+ <div id="spin">SPIN</div>
74
+
75
+ <div id="div"></div>
76
+
77
+ <script src="js/main.js"></script>
78
+
79
+ </body>
80
+
81
+ </html>
82
+
83
+ ```
84
+
85
+ ```CSS
86
+
87
+ body{
88
+
89
+ background:#bdc3c7;
90
+
91
+ font-size:16px;
92
+
93
+ font-weight:bold;
94
+
95
+ font-family:Arial,sans-serif;
96
+
97
+ }
98
+
99
+
100
+
101
+ main{
102
+
103
+ width:300px;
104
+
105
+ background:#ecf0f1;
106
+
107
+ padding:20px;
108
+
109
+ border:4px solid #fff;
110
+
111
+ border-radius:12px;
112
+
113
+ margin:16px auto;
114
+
115
+ display:flex;
116
+
117
+ justify-content:space-between;
118
+
119
+ }
120
+
121
+
122
+
123
+ .panel img{
124
+
125
+ width:90px;
126
+
127
+ height:110px;
128
+
129
+ margin-bottom:4px;
130
+
131
+
132
+
133
+ }
134
+
135
+
136
+
137
+ .stop{
138
+
139
+ cursor:pointer;
140
+
141
+ width:90px;
142
+
143
+ height:32px;
144
+
145
+ background:#ef454a;
146
+
147
+ box-shadow:0 4px 0 #d1483d;
148
+
149
+ border-radius:16px;
150
+
151
+ line-height:32px;
152
+
153
+ text-align:center;
154
+
155
+ font-size:14px;
156
+
157
+ color:#fff;
158
+
159
+ user-select:none;
160
+
161
+
162
+
163
+ }
164
+
165
+
166
+
167
+ #spin{
168
+
169
+ cursor:pointer;
170
+
171
+ width:280px;
172
+
173
+ height:36px;
174
+
175
+ background:#3498db;
176
+
177
+ box-shadow:0 4px 0 #2880b9;
178
+
179
+ border-radius:18px;
180
+
181
+ line-height:36px;
182
+
183
+ text-align:center;
184
+
185
+ color:#fff;
186
+
187
+ user-select:none;
188
+
189
+ margin:0 auto;
190
+
191
+
192
+
193
+ }
194
+
195
+
196
+
197
+ .unmatched{
198
+
199
+ opacity:0.5;
200
+
201
+ }
202
+
203
+
204
+
205
+ .inactive{
206
+
207
+ opacity:0.5;
208
+
209
+ }
210
+
211
+
212
+
213
+ .coins{
214
+
215
+ width:280px;
216
+
217
+ height:36px;
218
+
219
+ background:#ecf0f1;
220
+
221
+ border-radius: 4px;
222
+
223
+ border:4px solid #fff;
224
+
225
+ margin:20px auto;
226
+
227
+ text-align:center;
228
+
229
+ }
230
+
231
+ ```
232
+
51
233
 
52
234
 
53
235
  ```javascript

1

発生している問題、試したことを詳しく記述した。

2020/05/10 13:04

投稿

mu_tin
mu_tin

スコア1

test CHANGED
File without changes
test CHANGED
@@ -1,20 +1,46 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
-
4
-
5
- ドットインストールの、スロットマシンを作ろうのレッスンを参考にしました。
3
+ ドットインストールのスロットマシンを作ろうのレッスンを参考にしました。
6
-
4
+
7
- そこから、アレンジして、絵柄ごとに取得できるコイン枚数をswitch文で分岐させたいと思っています。
5
+ そこからアレンジして、揃った絵柄ごとに取得できるコイン枚数をswitch文で分岐させたいと思っています。
6
+
7
+
8
+
9
+ getCash関数を定義して、引数にpanels[0]を渡しています。
10
+
11
+ そしてswitch文で、panels[0]の画像とimagesの配列にある画像を比較して、一致した画像に応じてコイン枚数を変えようと思っています。
8
12
 
9
13
 
10
14
 
11
15
  ### 発生している問題・エラーメッセージ
12
16
 
13
-
14
-
15
17
  ```
16
18
 
19
+ 上記の考えで行うと、以下のようなエラーメッセージが出ます。
20
+
21
+ main.js:74 Uncaught ReferenceError: images is not defined
22
+
23
+ at getCash (main.js:74)
24
+
25
+ at checkResult (main.js:124)
26
+
27
+ at keydownStop (main.js:163)
28
+
29
+ at HTMLDocument.<anonymous> (main.js:185)
30
+
31
+ getCash @ main.js:74
32
+
33
+ checkResult @ main.js:124
34
+
35
+ keydownStop @ main.js:163
36
+
37
+ (anonymous) @ main.js:185
38
+
39
+
40
+
17
- getCash関数を定義してswitch文で分岐させたいのですが、うまくいきません。
41
+ スロットの画像自体は表示されているので、images　は定義されていると思うのですが、何がいけないのでしょうか。
42
+
43
+
18
44
 
19
45
  ```
20
46
 
@@ -24,7 +50,7 @@
24
50
 
25
51
 
26
52
 
27
- ```javascript
53
+ ```javascript
28
54
 
29
55
  'use strict';
30
56
 
@@ -276,18 +302,202 @@
276
302
 
277
303
  }
278
304
 
279
-
305
+ };
306
+
307
+
308
+
309
+
310
+
311
+ let cash = 10;
312
+
313
+ let coins = document.getElementById('div');
314
+
315
+ coins.textContent = `コイン枚数：${cash}`;
316
+
317
+ coins.classList.add('coins');
318
+
319
+
320
+
321
+ function haveCash(){
322
+
323
+ cash--;
324
+
325
+ coins.textContent = `コイン枚数：${cash}`;
280
326
 
281
327
  };
282
328
 
329
+
330
+
283
-
331
+ function keydownSpin(){
332
+
284
-
333
+ spin.classList.add('inactive');
334
+
285
-
335
+ panels.forEach(panel => {
336
+
286
-
337
+ panel.activate();
338
+
287
-
339
+ panel.spin();
340
+
288
-
341
+ });
342
+
289
-
343
+ };
344
+
345
+
346
+
290
-
347
+ let panelsLeft = 3;
348
+
349
+
350
+
351
+
352
+
291
-
353
+ function keydownStop(i){
354
+
355
+ if(i.stop.classList.contains('inactive')){
356
+
357
+ return;
358
+
359
+ };
360
+
361
+ i.stop.classList.add('inactive');
362
+
363
+ clearTimeout(i.timeoutId);
364
+
365
+
366
+
367
+ panelsLeft --;
368
+
369
+
370
+
371
+ if(panelsLeft === 0){
372
+
373
+ spin.classList.remove('inactive');
374
+
375
+ panelsLeft = 3;
376
+
377
+ checkResult(panels[0],panels[1],panels[2]);
378
+
379
+
380
+
381
+ };
382
+
383
+ };
384
+
385
+
386
+
387
+ const panels = [
388
+
389
+ new Panel(),
390
+
391
+ new Panel(),
392
+
393
+ new Panel(),
394
+
395
+ ];
396
+
397
+
398
+
399
+ const spin = document.getElementById('spin');
400
+
401
+
402
+
403
+ document.addEventListener('keydown',(e)=>{
404
+
405
+
406
+
407
+ switch(e.keyCode){
408
+
409
+
410
+
411
+ case 100:
412
+
413
+ keydownStop(panels[0]);
414
+
415
+ break;
416
+
417
+
418
+
419
+ case 101:
420
+
421
+ keydownStop(panels[1]);
422
+
423
+ break;
424
+
425
+
426
+
427
+ case 102:
428
+
429
+ keydownStop(panels[2]);
430
+
431
+ break;
432
+
433
+
434
+
435
+ case 96:
436
+
437
+ if(cash == 0 || spin.classList.contains('inactive')){
438
+
439
+ return;
440
+
441
+ }else{
442
+
443
+ keydownSpin();
444
+
445
+ haveCash();
446
+
447
+ }
448
+
449
+ break;
450
+
451
+ };
452
+
453
+
454
+
455
+ });
456
+
457
+
458
+
459
+ };
460
+
461
+
292
462
 
293
463
  ```
464
+
465
+
466
+
467
+ ### 試したこと
468
+
469
+
470
+
471
+ 1)getCash関数をPanelクラス内で定義したら、今度はgetCashが定義されていないことになった。
472
+
473
+ Uncaught ReferenceError: getCash is not defined
474
+
475
+ at checkResult (main.js:166)
476
+
477
+ at keydownStop (main.js:205)
478
+
479
+ at HTMLDocument.<anonymous> (main.js:223)
480
+
481
+ checkResult @ main.js:166
482
+
483
+ keydownStop @ main.js:205
484
+
485
+ (anonymous) @ main.js:223
486
+
487
+
488
+
489
+ 2)imagesをPanelクラス外で、新たに定義した。
490
+
491
+ エラーメッセージは出ないが、コインを取得できなかった(getCash関数が動いてない？)
492
+
493
+
494
+
495
+
496
+
497
+
498
+
499
+ ### 補足情報（FW/ツールのバージョンなど）
500
+
501
+
502
+
503
+ ここにより詳細な情報を記載してください。