teratail
回答率
85.48%
質問するログイン新規登録

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

新規登録して質問してみよう
ただいま回答率
85.48%
トップJavaScriptに関する質問
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

4回答

1024閲覧

JavaScript スロットマシンでコインを取得したい

mu_tin
mu_tin

総合スコア1

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2020/05/09 08:41

編集2020/05/10 13:05

0

1

前提・実現したいこと

ドットインストールのスロットマシンを作ろうのレッスンを参考にしました。
そこからアレンジして、揃った絵柄ごとに取得できるコイン枚数をswitch文で分岐させたいと思っています。

getCash関数を定義して、引数にpanels[0]を渡しています。
そしてswitch文で、panels[0]の画像とimagesの配列にある画像を比較して、一致した画像に応じてコイン枚数を変えようと思っています。

発生している問題・エラーメッセージ

上記の考えで行うと、以下のようなエラーメッセージが出ます。
main.js:74 Uncaught ReferenceError: images is not defined
    at getCash (main.js:74)
    at checkResult (main.js:124)
    at keydownStop (main.js:163)
    at HTMLDocument.<anonymous> (main.js:185)
getCash @ main.js:74
checkResult @ main.js:124
keydownStop @ main.js:163
(anonymous) @ main.js:185

スロットの画像自体は表示されているので、images　は定義されていると思うのですが、何がいけないのでしょうか。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>Slot Machine</title>
6    <link rel="stylesheet" href="css/styles.css">
7
8  </head>
9  <body>
10    <main></main>
11    <div id="spin">SPIN</div>
12    <div id="div"></div>
13    <script src="js/main.js"></script>
14  </body>
15</html>

CSS
1body{
2  background:#bdc3c7;
3  font-size:16px;
4  font-weight:bold;
5  font-family:Arial,sans-serif;
6}
7
8main{
9  width:300px;
10  background:#ecf0f1;
11  padding:20px;
12  border:4px solid #fff;
13  border-radius:12px;
14  margin:16px auto;
15  display:flex;
16  justify-content:space-between;
17}
18
19.panel img{
20  width:90px;
21  height:110px;
22  margin-bottom:4px;
23 
24}
25
26.stop{
27  cursor:pointer;
28  width:90px;
29  height:32px;
30  background:#ef454a;
31  box-shadow:0 4px 0 #d1483d;
32  border-radius:16px;
33  line-height:32px;
34  text-align:center;
35  font-size:14px;
36  color:#fff;
37  user-select:none;
38
39}
40
41#spin{
42  cursor:pointer;
43  width:280px;
44  height:36px;
45  background:#3498db;
46  box-shadow:0 4px 0 #2880b9;
47  border-radius:18px;
48  line-height:36px;
49  text-align:center;
50  color:#fff;
51  user-select:none;
52  margin:0 auto;
53
54}
55
56.unmatched{
57  opacity:0.5;
58}
59
60.inactive{
61  opacity:0.5;
62}
63
64.coins{
65  width:280px;
66  height:36px;
67  background:#ecf0f1;
68  border-radius: 4px;
69  border:4px solid #fff;
70  margin:20px auto;
71  text-align:center;
72}
javascript
1'use strict';
2
3{
4 class Panel{
5   constructor(){
6     const section = document.createElement('section');
7     section.classList.add('panel');
8
9     this.img = document.createElement('img');
10     this.img.src = this.getRandomImage();
11
12     this.timeoutId = undefined;
13
14     this.stop = document.createElement('div');
15     this.stop.textContent = 'STOP';
16     this.stop.classList.add('stop','inactive');
17     
18     section.appendChild(this.img);
19     section.appendChild(this.stop);
20
21     const main = document.querySelector('main');
22     main.appendChild(section);
23     
24    }
25    
26    images = [
27      '../JS slot.html/bell.jpg', //5
28      '../JS slot.html/banana.jpg',//10
29      '../JS slot.html/cherry.jpg',//30
30      '../JS slot.html/grape.jpg', //50
31      '../JS slot.html/bar.jpg',   //100
32      '../JS slot.html/piero.jpg', //300
33      '../JS slot.html/seven.jpg', //500
34    ];
35    
36    
37    
38    getRandomImage(){
39     return this.images[Math.floor(Math.random() * this.images.length)];
40   }
41
42  spin(){
43     this.img.src = this.getRandomImage();
44     this.timeoutId = setTimeout(()=>{
45       this.spin();
46     },1000);
47    
48   }
49   
50
51   isUnmatched(p1,p2){
52     return this.img.src !== p1.img.src && this.img.src !== p2.img.src;
53   }
54
55   isMatched(p1,p2){
56     return this.img.src == p1.img.src && this.img.src == p2.img.src;
57   }
58
59   unmatch(){
60     this.img.classList.add('unmatched');
61   }
62
63   activate(){
64     this.img.classList.remove('unmatched');
65     this.stop.classList.remove('inactive');
66    }
67  
68 };
69
70function getCash(p0){
71  
72    switch(p0){
73      
74      case images[0]:
75        cash += 5;
76        coins.textContent = `コイン枚数：${cash}`;
77        break;
78       
79      case  images[1]:  
80        cash += 10;
81        coins.textContent = `コイン枚数：${cash}`;
82        break;
83     
84      case  images[2]:
85        cash += 30;
86        coins.textContent = `コイン枚数：${cash}`;
87        break;
88       
89      case  images[3]:
90         cash += 50;
91         coins.textContent = `コイン枚数：${cash}`;
92         break;
93         
94      case  images[4]:
95        cash += 100;
96        coins.textContent = `コイン枚数：${cash}`;
97        break;
98
99      case  images[5]:
100        cash += 300;
101        coins.textContent = `コイン枚数：${cash}`;
102        break;
103       
104      case  images[6]:
105        cash += 500;
106        coins.textContent = `コイン枚数：${cash}`;
107        break;
108       
109      }
110  };
111
112    function checkResult(){
113
114    if(panels[0].isUnmatched(panels[1],panels[2])){
115      panels[0].unmatch();
116    }
117    if(panels[1].isUnmatched(panels[0],panels[2])){
118      panels[1].unmatch();
119    }
120    if(panels[2].isUnmatched(panels[0],panels[1])){
121      panels[2].unmatch();
122    }
123    if(panels[0].isMatched(panels[1],panels[2])){
124      getCash(panels[0]);
125    }
126    };
127
128
129 let cash = 10;
130  let coins = document.getElementById('div');
131  coins.textContent = `コイン枚数：${cash}`;
132  coins.classList.add('coins');
133  
134  function haveCash(){
135      cash--;
136      coins.textContent = `コイン枚数：${cash}`;
137  };
138  
139  function keydownSpin(){ 
140    spin.classList.add('inactive');
141    panels.forEach(panel => {
142      panel.activate();
143      panel.spin();
144    });
145  };
146
147  let panelsLeft = 3;
148  
149  
150  function keydownStop(i){ 
151    if(i.stop.classList.contains('inactive')){
152      return;
153    };
154    i.stop.classList.add('inactive');
155    clearTimeout(i.timeoutId);
156
157    panelsLeft --;
158
159    if(panelsLeft === 0){
160      spin.classList.remove('inactive');
161      panelsLeft = 3;
162      checkResult(panels[0],panels[1],panels[2]);
163     
164    };
165  };
166
167 const panels = [
168   new Panel(),
169   new Panel(),
170   new Panel(),
171 ];
172
173 const spin = document.getElementById('spin');
174
175document.addEventListener('keydown',(e)=>{
176
177  switch(e.keyCode){
178
179    case 100:
180      keydownStop(panels[0]);
181      break;
182
183    case 101:
184      keydownStop(panels[1]);
185      break;
186
187    case 102:
188      keydownStop(panels[2]);
189      break;
190
191    case 96:
192      if(cash == 0 || spin.classList.contains('inactive')){
193        return;
194      }else{
195        keydownSpin();
196        haveCash();
197      }
198       break;
199  };
200
201});
202  
203};
204

試したこと

1)getCash関数をPanelクラス内で定義したら、今度はgetCashが定義されていないことになった。
Uncaught ReferenceError: getCash is not defined
at checkResult (main.js:166)
at keydownStop (main.js:205)
at HTMLDocument.<anonymous> (main.js:223)
checkResult @ main.js:166
keydownStop @ main.js:205
(anonymous) @ main.js:223

2)imagesをPanelクラス外で、新たに定義した。
エラーメッセージは出ないが、コインを取得できなかった(getCash関数が動いてない？)

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344
kei344

2020/05/09 08:52

「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」を、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。 エラーはデベロッパーツールで確認してみてください。 https://eng-entrance.com/javascript-display-error
mu_tin
mu_tin

2020/05/09 08:57

コメントありがとうございます。 より詳しく記述して、質問しなおしたいと思います。
kei344
kei344

2020/05/09 08:59

質問文は編集できますよ。
mu_tin
mu_tin

2020/05/09 09:50

質問編集しました。
guest

回答4件

0

ReferenceError

JavaScript
1'use strict';
2// ...
3images = [  // ReferenceError: images is not defined
4  '../JS slot.html/bell.jpg', //5
5  '../JS slot.html/banana.jpg',//10
6  '../JS slot.html/cherry.jpg',//30
7  '../JS slot.html/grape.jpg', //50
8  '../JS slot.html/bar.jpg',  //100
9  '../JS slot.html/piero.jpg', //300
10  '../JS slot.html/seven.jpg', //500
11];

Strict Modeでは「暗黙のグローバル変数宣言」は使用出来ません。

第一に strict モードでは、偶発的にグローバル変数を作成できないようにします。通常の JavaScript では、代入文で変数名の綴りを間違えるとグローバルオブジェクトに新しいプロパティが作成され、そしてそれは動作し続けます (現在または将来問題になる可能性はありますが)。strict モードでは、代入文で偶発的にグローバル変数を作成せずにエラーを投げます:

JavaScript
1"use strict";
2mistypedVaraible = 17; // throws a ReferenceError

Re: mu_tin さん

投稿2020/05/09 10:10

編集2020/05/10 13:11
think49
think49

総合スコア18162

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mu_tin
mu_tin

2020/05/10 06:19

変数名の綴りがどこか間違えているということでしょうか？
think49
think49

2020/05/10 13:34 編集

注目すべきは「strict モードでは、代入文で偶発的にグローバル変数を作成せずにエラーを投げます」です。 全ての変数定義時にvar,let,constのいずれかを使用して下さい。
mu_tin
mu_tin

2020/05/11 03:43

全ての変数にlet,constを使用しましたが、問題の解決にはなりませんでした。
guest

0

ベストアンサー

こんにちは、もう一度書き直してみました。
たぶん動くと思います。

Javascript
1"use strict";
2
3{
4    const images = [
5        "../JS slot.html/bell.jpg", //5
6        "../JS slot.html/banana.jpg", //10
7        "../JS slot.html/cherry.jpg", //30
8        "../JS slot.html/grape.jpg", //50
9        "../JS slot.html/bar.jpg", //100
10        "../JS slot.html/piero.jpg", //300
11        "../JS slot.html/seven.jpg", //500
12    ];
13    class Panel {
14        constructor() {
15            const section = document.createElement("section");
16            section.classList.add("panel");
17
18            this.img = document.createElement("img");
19            this.img.src = this.getRandomImage();
20
21            this.timeoutId = undefined;
22
23            this.stop = document.createElement("div");
24            this.stop.textContent = "STOP";
25            this.stop.classList.add("stop", "inactive");
26
27            section.appendChild(this.img);
28            section.appendChild(this.stop);
29
30            const main = document.querySelector("main");
31            main.appendChild(section);
32        }
33
34        getRandomImage() {
35            return images[Math.floor(Math.random() * images.length)];
36        }
37
38        spin() {
39            this.img.src = this.getRandomImage();
40            this.timeoutId = setTimeout(() => {
41                this.spin();
42            }, 1000);
43        }
44
45        isUnmatched(p1, p2) {
46            return this.img.src !== p1.img.src && this.img.src !== p2.img.src;
47        }
48
49        isMatched(p1, p2) {
50            return this.img.src == p1.img.src && this.img.src == p2.img.src;
51        }
52
53        unmatch() {
54            this.img.classList.add("unmatched");
55        }
56
57        activate() {
58            this.img.classList.remove("unmatched");
59            this.stop.classList.remove("inactive");
60        }
61    }
62
63    let cash = 10;
64    let coins = document.getElementById("div");
65    coins.textContent = `コイン枚数：${cash}`;
66    coins.classList.add("coins");
67
68    function getCash(p0) {
69        switch (p0.img.src) {
70            case images[0]:
71                cash += 5;
72                coins.textContent = `コイン枚数：${cash}`;
73                break;
74
75            case images[1]:
76                cash += 10;
77                coins.textContent = `コイン枚数：${cash}`;
78                break;
79
80            case images[2]:
81                cash += 30;
82                coins.textContent = `コイン枚数：${cash}`;
83                break;
84
85            case images[3]:
86                cash += 50;
87                coins.textContent = `コイン枚数：${cash}`;
88                break;
89
90            case images[4]:
91                cash += 100;
92                coins.textContent = `コイン枚数：${cash}`;
93                break;
94
95            case images[5]:
96                cash += 300;
97                coins.textContent = `コイン枚数：${cash}`;
98                break;
99
100            case images[6]:
101                cash += 500;
102                coins.textContent = `コイン枚数：${cash}`;
103                break;
104        }
105    }
106
107    function checkResult() {
108        if (panels[0].isUnmatched(panels[1], panels[2])) {
109            panels[0].unmatch();
110        }
111        if (panels[1].isUnmatched(panels[0], panels[2])) {
112            panels[1].unmatch();
113        }
114        if (panels[2].isUnmatched(panels[0], panels[1])) {
115            panels[2].unmatch();
116        }
117        if (panels[0].isMatched(panels[1], panels[2])) {
118            getCash(panels[0]);
119        }
120    }
121
122    function haveCash() {
123        cash--;
124        coins.textContent = `コイン枚数：${cash}`;
125    }
126
127    let panelsLeft = 3;
128    const spin = document.getElementById("spin");
129
130    function keydownSpin() {
131        spin.classList.add("inactive");
132        panels.forEach((panel) => {
133            panel.activate();
134            panel.spin();
135        });
136    }
137
138    function keydownStop(i) {
139        if (i.stop.classList.contains("inactive")) {
140            return;
141        }
142        i.stop.classList.add("inactive");
143        clearTimeout(i.timeoutId);
144
145        panelsLeft--;
146
147        if (panelsLeft === 0) {
148            spin.classList.remove("inactive");
149            panelsLeft = 3;
150            checkResult(panels[0], panels[1], panels[2]);
151        }
152    }
153
154    const panels = [new Panel(), new Panel(), new Panel()];
155
156    document.addEventListener("keydown", (e) => {
157        switch (e.keyCode) {
158            case 100:
159                keydownStop(panels[0]);
160                break;
161
162            case 101:
163                keydownStop(panels[1]);
164                break;
165
166            case 102:
167                keydownStop(panels[2]);
168                break;
169
170            case 96:
171                if (cash == 0 || spin.classList.contains("inactive")) {
172                    return;
173                } else {
174                    keydownSpin();
175                    haveCash();
176                }
177                break;
178        }
179    });
180}
181

投稿2020/05/10 22:38

fake_shibe
fake_shibe

総合スコア806

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mu_tin
mu_tin

2020/05/11 03:51

やってみましたが、同じ結果でした。
fake_shibe
fake_shibe

2020/05/11 07:44

コインは減りますか？
mu_tin
mu_tin

2020/05/12 04:06

減りません。
fake_shibe
fake_shibe

2020/05/12 07:15

こんにちは、 document.addEventListener("keydown" の中にある case 96: を case 13: にしてEnterボタンを 押したらコインが減りスロットがスタートしますでしょうか？
mu_tin
mu_tin

2020/05/12 08:09

case 13:にしましたが、ちゃんとコインが減りスロットも動きました。 しかし、コインは増えません。
fake_shibe
fake_shibe

2020/05/12 08:26

こんにちは、 document.addEventListener("keydown" の中にある case 100: を case 49: にして1のボタンを押す（左が止まる）、 case 101: を case 50: にして2のボタンを押す（真ん中が止まる）、 case 102: を case 51: にして3のボタンを押す（右が止まる）、 上のようにして画像が一致したらコインが増えるでしょうか？ case 数字:で好きなキーコードを指定することが出来ます。 したのURLでキーの数字がわかると思います。 http://shanabrian.com/web/javascript/keycode.php
mu_tin
mu_tin

2020/05/12 08:55

やってみましたが、コインは増えず、何の変化もありません。
fake_shibe
fake_shibe

2020/05/12 09:14

こんにちは、キーボードで１，２，３のボタンを押したら画像は止まりますか？ const images = [ "https://dummyimage.com/600x400/000/fff&text=5", "https://dummyimage.com/600x400/000/fff&text=10", "https://dummyimage.com/600x400/000/fff&text=30", "https://dummyimage.com/600x400/000/fff&text=50", "https://dummyimage.com/600x400/000/fff&text=100", "https://dummyimage.com/600x400/000/fff&text=300", "https://dummyimage.com/600x400/000/fff&text=500", ]; 上記のように画像を変えて見ても駄目でしょうか？
mu_tin
mu_tin

2020/05/12 10:38

画像を変えたらコイン増えました！！ 思った通りに動いてくれました！！ 元々の画像では何か問題があったのでしょうか？
fake_shibe
fake_shibe

2020/05/12 10:56

画像を保存している場所をフルのパスで指定する必要がある気がします。 "../JS slot.html/bell.jpg"を"http://127.0.0.1:5500/images/bell.jpg" で指定しないといけないかもしれません。
mu_tin
mu_tin

2020/05/12 11:51

フルのパスで指定する必要があるのですね。まったく気にもしていませんでした。 とても勉強になりました。 何度も回答していただき本当にありがとうございました。
guest

0

こんにちは、書き直してみました。
動くか分かりませんが、試してみてください。

Javascript
1"use strict";
2
3{
4    const images = [
5        "../JS slot.html/bell.jpg", //5
6        "../JS slot.html/banana.jpg", //10
7        "../JS slot.html/cherry.jpg", //30
8        "../JS slot.html/grape.jpg", //50
9        "../JS slot.html/bar.jpg", //100
10        "../JS slot.html/piero.jpg", //300
11        "../JS slot.html/seven.jpg", //500
12    ];
13    
14    let cash = 10;
15
16    class Panel {
17        constructor() {
18            const section = document.createElement("section");
19            section.classList.add("panel");
20
21            this.img = document.createElement("img");
22            this.img.src = this.getRandomImage();
23
24            this.timeoutId = undefined;
25
26            this.stop = document.createElement("div");
27            this.stop.textContent = "STOP";
28            this.stop.classList.add("stop", "inactive");
29
30            section.appendChild(this.img);
31            section.appendChild(this.stop);
32
33            const main = document.querySelector("main");
34            main.appendChild(section);
35        }
36
37
38        getRandomImage() {
39            return images[Math.floor(Math.random() * images.length)];
40        }
41
42        spin() {
43            this.img.src = this.getRandomImage();
44            this.timeoutId = setTimeout(() => {
45                this.spin();
46            }, 1000);
47        }
48
49        isUnmatched(p1, p2) {
50            return this.img.src !== p1.img.src && this.img.src !== p2.img.src;
51        }
52
53        isMatched(p1, p2) {
54            return this.img.src == p1.img.src && this.img.src == p2.img.src;
55        }
56
57        unmatch() {
58            this.img.classList.add("unmatched");
59        }
60
61        activate() {
62            this.img.classList.remove("unmatched");
63            this.stop.classList.remove("inactive");
64        }
65    }
66
67    function getCash(p0) {
68        switch (p0) {
69            case images[0]:
70                cash += 5;
71                coins.textContent = `コイン枚数：${cash}`;
72                break;
73
74            case images[1]:
75                cash += 10;
76                coins.textContent = `コイン枚数：${cash}`;
77                break;
78
79            case images[2]:
80                cash += 30;
81                coins.textContent = `コイン枚数：${cash}`;
82                break;
83
84            case images[3]:
85                cash += 50;
86                coins.textContent = `コイン枚数：${cash}`;
87                break;
88
89            case images[4]:
90                cash += 100;
91                coins.textContent = `コイン枚数：${cash}`;
92                break;
93
94            case images[5]:
95                cash += 300;
96                coins.textContent = `コイン枚数：${cash}`;
97                break;
98
99            case images[6]:
100                cash += 500;
101                coins.textContent = `コイン枚数：${cash}`;
102                break;
103        }
104    }
105
106    function checkResult() {
107        if (panels[0].isUnmatched(panels[1], panels[2])) {
108            panels[0].unmatch();
109        }
110        if (panels[1].isUnmatched(panels[0], panels[2])) {
111            panels[1].unmatch();
112        }
113        if (panels[2].isUnmatched(panels[0], panels[1])) {
114            panels[2].unmatch();
115        }
116        if (panels[0].isMatched(panels[1], panels[2])) {
117            getCash(panels[0]);
118        }
119    }
120
121    let coins = document.getElementById("div");
122    coins.textContent = `コイン枚数：${cash}`;
123    coins.classList.add("coins");
124
125    function haveCash() {
126        cash--;
127        coins.textContent = `コイン枚数：${cash}`;
128    }
129
130    function keydownSpin() {
131        spin.classList.add("inactive");
132        panels.forEach((panel) => {
133            panel.activate();
134            panel.spin();
135        });
136    }
137
138    let panelsLeft = 3;
139
140    function keydownStop(i) {
141        if (i.stop.classList.contains("inactive")) {
142            return;
143        }
144        i.stop.classList.add("inactive");
145        clearTimeout(i.timeoutId);
146
147        panelsLeft--;
148
149        if (panelsLeft === 0) {
150            spin.classList.remove("inactive");
151            panelsLeft = 3;
152            checkResult(panels[0], panels[1], panels[2]);
153        }
154    }
155
156    const panels = [new Panel(), new Panel(), new Panel()];
157
158    const spin = document.getElementById("spin");
159
160    document.addEventListener("keydown", (e) => {
161        switch (e.keyCode) {
162            case 100:
163                keydownStop(panels[0]);
164                break;
165
166            case 101:
167                keydownStop(panels[1]);
168                break;
169
170            case 102:
171                keydownStop(panels[2]);
172                break;
173
174            case 96:
175                if (cash == 0 || spin.classList.contains("inactive")) {
176                    return;
177                } else {
178                    keydownSpin();
179                    haveCash();
180                }
181                break;
182        }
183    });
184}

投稿2020/05/10 08:57

fake_shibe
fake_shibe

総合スコア806

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

こんにちは、変数imagesの場所がclass Panelのプライベート空間にあるので、一番上で宣言させれば問題ないかと思います。
それから、getRandomImage()内のthis.imagesをimagesにすれば動くかもしれません。
以下がコードになります。

Javascript
1"use strict";
2
3{
4    images = [
5        "../JS slot.html/bell.jpg", //5
6        "../JS slot.html/banana.jpg", //10
7        "../JS slot.html/cherry.jpg", //30
8        "../JS slot.html/grape.jpg", //50
9        "../JS slot.html/bar.jpg", //100
10        "../JS slot.html/piero.jpg", //300
11        "../JS slot.html/seven.jpg", //500
12    ];
13    
14    class Panel {
15        constructor() {
16            const section = document.createElement("section");
17            section.classList.add("panel");
18
19            this.img = document.createElement("img");
20            this.img.src = this.getRandomImage();
21
22            this.timeoutId = undefined;
23
24            this.stop = document.createElement("div");
25            this.stop.textContent = "STOP";
26            this.stop.classList.add("stop", "inactive");
27
28            section.appendChild(this.img);
29            section.appendChild(this.stop);
30
31            const main = document.querySelector("main");
32            main.appendChild(section);
33        }
34
35
36        getRandomImage() {
37            return images[Math.floor(Math.random() * images.length)];
38        }
39
40        spin() {
41            this.img.src = this.getRandomImage();
42            this.timeoutId = setTimeout(() => {
43                this.spin();
44            }, 1000);
45        }
46
47        isUnmatched(p1, p2) {
48            return this.img.src !== p1.img.src && this.img.src !== p2.img.src;
49        }
50
51        isMatched(p1, p2) {
52            return this.img.src == p1.img.src && this.img.src == p2.img.src;
53        }
54
55        unmatch() {
56            this.img.classList.add("unmatched");
57        }
58
59        activate() {
60            this.img.classList.remove("unmatched");
61            this.stop.classList.remove("inactive");
62        }
63    }
64
65    function getCash(p0) {
66        switch (p0) {
67            case images[0]:
68                cash += 5;
69                coins.textContent = `コイン枚数：${cash}`;
70                break;
71
72            case images[1]:
73                cash += 10;
74                coins.textContent = `コイン枚数：${cash}`;
75                break;
76
77            case images[2]:
78                cash += 30;
79                coins.textContent = `コイン枚数：${cash}`;
80                break;
81
82            case images[3]:
83                cash += 50;
84                coins.textContent = `コイン枚数：${cash}`;
85                break;
86
87            case images[4]:
88                cash += 100;
89                coins.textContent = `コイン枚数：${cash}`;
90                break;
91
92            case images[5]:
93                cash += 300;
94                coins.textContent = `コイン枚数：${cash}`;
95                break;
96
97            case images[6]:
98                cash += 500;
99                coins.textContent = `コイン枚数：${cash}`;
100                break;
101        }
102    }
103
104    function checkResult() {
105        if (panels[0].isUnmatched(panels[1], panels[2])) {
106            panels[0].unmatch();
107        }
108        if (panels[1].isUnmatched(panels[0], panels[2])) {
109            panels[1].unmatch();
110        }
111        if (panels[2].isUnmatched(panels[0], panels[1])) {
112            panels[2].unmatch();
113        }
114        if (panels[0].isMatched(panels[1], panels[2])) {
115            getCash(panels[0]);
116        }
117    }
118
119    let cash = 10;
120    let coins = document.getElementById("div");
121    coins.textContent = `コイン枚数：${cash}`;
122    coins.classList.add("coins");
123
124    function haveCash() {
125        cash--;
126        coins.textContent = `コイン枚数：${cash}`;
127    }
128
129    function keydownSpin() {
130        spin.classList.add("inactive");
131        panels.forEach((panel) => {
132            panel.activate();
133            panel.spin();
134        });
135    }
136
137    let panelsLeft = 3;
138
139    function keydownStop(i) {
140        if (i.stop.classList.contains("inactive")) {
141            return;
142        }
143        i.stop.classList.add("inactive");
144        clearTimeout(i.timeoutId);
145
146        panelsLeft--;
147
148        if (panelsLeft === 0) {
149            spin.classList.remove("inactive");
150            panelsLeft = 3;
151            checkResult(panels[0], panels[1], panels[2]);
152        }
153    }
154
155    const panels = [new Panel(), new Panel(), new Panel()];
156
157    const spin = document.getElementById("spin");
158
159    document.addEventListener("keydown", (e) => {
160        switch (e.keyCode) {
161            case 100:
162                keydownStop(panels[0]);
163                break;
164
165            case 101:
166                keydownStop(panels[1]);
167                break;
168
169            case 102:
170                keydownStop(panels[2]);
171                break;
172
173            case 96:
174                if (cash == 0 || spin.classList.contains("inactive")) {
175                    return;
176                } else {
177                    keydownSpin();
178                    haveCash();
179                }
180                break;
181        }
182    });
183}
184

投稿2020/05/10 06:53

編集2020/05/10 06:59
fake_shibe
fake_shibe

総合スコア806

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mu_tin
mu_tin

2020/05/10 07:28

回答ありがとうございます。 imagesを一番上で宣言、this.imagesをimagesに変えると、以下のようなエラーが発生しました。 Uncaught ReferenceError: images is not defined at main.js:4 そこで、imagesの前に const と書いたところ、エラーは発生しませんでしたがコインが増えませんでした。こうなると、getCash関数に問題があるのでしょうか。
fake_shibe
fake_shibe

2020/05/10 08:54

こんにちは、let cash = 10; を const images = の 下で宣言してみたらいかがでしょうか？
mu_tin
mu_tin

2020/05/10 09:07

やってみましたが、先ほどと同じで、エラーはないですがコインが増えませんでした。
fake_shibe
fake_shibe

2020/05/10 09:31

こんにちは、HTMLとCSSのソースコードがあればこちらで検証できますので出来たらお願いします。
fake_shibe
fake_shibe

2020/05/10 09:49

こんにちは、 function getCash(p0) { switch (p0.img.src) { にしてみたらどうでしょうか？
mu_tin
mu_tin

2020/05/10 13:08

function getCash(p0) { switch (p0.img.src) { としてみましたが、特に変化はなくエラーメッセージは出ず、コインも増えませんでした。 HTMLとcssのソースコードを追加しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

トップJavaScriptに関する質問

JavaScript スロットマシンでコインを取得したい