javascriptでもぐらたたきゲームを作りたい

前提・実現したいこと

JavaScriptでもぐらたたきゲームが作りたいです。
スタートボタンをおす→もぐら、ねこ、犬の画像からもぐらだけをクリック（１分間）→押したもぐらの数だけ点数が加算→結果を画面に表示
まだリセットボタンなどは作っていません。
よろしくお願い致します。

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

・もぐらをクリックしても点数が加算されたり加算されなかったりする
・点数に応じて、ゲーム終了時に画面が出てくるようを条件分岐しているが、その画面が出たり出なかったりする

エラーメッセージ

特にないです

該当のソースコード

html
1
2
3    <h1>もぐらたたき！！</h1>
4    <div class="btn__container">
5        <div id="btn__start" class="btn btn__start">Start</div>
6    </div>
7
8    <div id="container">
9    </div>
10    <div id="timer">01:00 秒</div>
11
12    <div id="success" class="score">
13        <div class="score__container score__success">
14            <div class="score__title">すごい！！</div>
15            <div class="score__score">40<span>点</span></div><!-- 点数は仮です -->
16         <div id="btn__reset" class="btn btn__continue">Continue!!</div>
17        </div>
18    </div>
19    <div id="good" class="score">
20        <class class="score__container score__success">
21            <div class="score__title">この調子！</div>
22            <div class="score__score">40<span>点</span></div>
23         <div id="btn__reset" class="btn btn__continue">Continue!!</div>
24        </div>
25    </div>
26    <div id="cheer" class="score">
27        <div class="score__container score__success">
28            <div class="score__title">頑張ろう！</div>
29            <div class="score__score">40<span>点</span></div>
30         <div id="btn__reset" class="btn btn__continue">Continue!!</div>
31        </div>
32    </div>
33</div>
34    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
35    <script src="js/main.js"></script>
36

javascript
1'use strict';
2
3{
4    class Panel{
5        constructor() {
6            const section = document.createElement('div');
7            section.classList.add('mole__item');
8
9            this.img = document.createElement('img');
10            this.img.src = this.getRandomImage();
11            section.appendChild(this.img);
12            const container = document.getElementById('container');
13            container.appendChild(section);
14            
15
16        }
17
18        
19
20        getRandomImage() {
21            const images = [
22                'img/cat.png',
23                'img/mole-work.png',
24                'img/dog.png',
25            ];
26
27            
28            return images[Math.floor(Math.random() * images.length)];
29
30        }
31
32        
33
34        spin() {
35            let timer = document.getElementById('timer');
36            this.img.src = this.getRandomImage();
37            if(this.img.src === 'http://127.0.0.1:5502/img/mole-work.png') {
38                this.img.classList.add('mole');
39                console.log(this.img.src);
40
41            }else if(this.img.src !== 'http://127.0.0.1:5502/img/mole-work.png') {
42                this.img.classList.remove('mole');
43            }
44
45            this.timeoutId = setTimeout(() => {
46                this.spin();
47                if(timer.classList.contains('stop') === true) {
48                    clearTimeout(this.timeoutId);
49                }
50            }, 1000);
51        }
52        sectionClick() {
53            const moles = document.querySelectorAll('.mole');
54        let point = 0;
55        for(let i =0; i < moles.length; i++ ) {
56            moles[i].addEventListener('click', () => {
57                // let srcDisassembly = imgSrc.split('/');
58                        point++;
59                        console.log(point);
60                let timer = document.getElementById('timer');
61                let success = document.getElementById('success');
62                let good = document.getElementById('good');
63                let cheer = document.getElementById('cheer');
64                if(timer.classList.contains('stop') === true) {
65                    if(point >= 10) {
66                        success.style.display ='block';
67                    }else if(9 >= point >= 4) {
68                        good.style.display ='block';
69                    }else if(point < 4) {
70                        cheer.style.display = 'block';
71                    }
72                }
73                    
74                });
75
76            }
77        
78            
79
80        
81        
82            
83        }
84        
85    }
86
87    
88
89    const panels = [
90        new Panel(),
91        new Panel(),
92        new Panel(),
93        new Panel(),
94        new Panel(),
95        new Panel(),
96        new Panel(),
97        new Panel(),
98        new Panel(),
99    ];
100    function timer() {
101        const totalTime = 60000;
102        const oldTime = Date.now();
103        const timerId = setInterval(() => {
104            let timer = document.getElementById('timer');
105            const currentTime = Date.now();
106            const diff = currentTime - oldTime;
107            const remainMSec = new Date(totalTime - diff);
108            const m = String(remainMSec.getMinutes()).padStart(2, '0');
109            const s = String(remainMSec.getSeconds()).padStart(2, '0');
110            let label = `${m}:${s} 秒`;
111
112            if(remainMSec <= 0) {
113                clearInterval(timerId);
114                timer.classList.add('stop');
115                timer.textContent = '0:00 秒';
116                return;
117            }
118            timer.innerHTML = label;
119        }, 100);
120    }
121
122
123    const btn = document.getElementById('btn__start');
124    btn.addEventListener('click',() => {
125        timer();
126        panels.forEach(panel => {
127            panel.spin();
128            panel.sectionClick();
129
130        })
131    })
132
133
134    
135}

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

mac/vscode

行動規範の内容に同意します

回答1件

もぐらをクリックしても点数が加算されたり加算されなかったりする

js
1        panels.forEach(panel => {
2            panel.spin();
3            panel.sectionClick();
4        })

というコードがありますが、panel.sectionClick()は、以下のコードです。

js
1        sectionClick() {
2            const moles = document.querySelectorAll('.mole');
3        let point = 0;
4        for(let i =0; i < moles.length; i++ ) {
5            moles[i].addEventListener('click', () => {
6//略
7            }
8        }

つまり、パネルごとにすべてのモグラパネルにクリックイベントを設定していますから、2重にループしているようなイメージになります。

点数に応じて、ゲーム終了時に画面が出てくるようを条件分岐しているが、その画面が出たり出なかったりする

それはこの部分だと思いますが、

js
1                let timer = document.getElementById('timer');
2                let success = document.getElementById('success');
3                let good = document.getElementById('good');
4                let cheer = document.getElementById('cheer');
5                if(timer.classList.contains('stop') === true) {
6                    if(point >= 10) {
7                        success.style.display ='block';
8                    }else if(9 >= point >= 4) {
9                        good.style.display ='block';
10                    }else if(point < 4) {
11                        cheer.style.display = 'block';
12                    }
13                }