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

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

ただいまの
回答率

87.48%

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

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,675

score 17

前提・実現したいこと

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

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

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

エラーメッセージ


特にないです

該当のソースコード

    <h1>もぐらたたき!!</h1>
    <div class="btn__container">
        <div id="btn__start" class="btn btn__start">Start</div>
    </div>

    <div id="container">
    </div>
    <div id="timer">01:00 秒</div>

    <div id="success" class="score">
        <div class="score__container score__success">
            <div class="score__title">すごい!!</div>
            <div class="score__score">40<span></span></div><!-- 点数は仮です -->
         <div id="btn__reset" class="btn btn__continue">Continue!!</div>
        </div>
    </div>
    <div id="good" class="score">
        <class class="score__container score__success">
            <div class="score__title">この調子!</div>
            <div class="score__score">40<span></span></div>
         <div id="btn__reset" class="btn btn__continue">Continue!!</div>
        </div>
    </div>
    <div id="cheer" class="score">
        <div class="score__container score__success">
            <div class="score__title">頑張ろう!</div>
            <div class="score__score">40<span></span></div>
         <div id="btn__reset" class="btn btn__continue">Continue!!</div>
        </div>
    </div>
</div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="js/main.js"></script>
'use strict';

{
    class Panel{
        constructor() {
            const section = document.createElement('div');
            section.classList.add('mole__item');

            this.img = document.createElement('img');
            this.img.src = this.getRandomImage();
            section.appendChild(this.img);
            const container = document.getElementById('container');
            container.appendChild(section);


        }



        getRandomImage() {
            const images = [
                'img/cat.png',
                'img/mole-work.png',
                'img/dog.png',
            ];


            return images[Math.floor(Math.random() * images.length)];

        }



        spin() {
            let timer = document.getElementById('timer');
            this.img.src = this.getRandomImage();
            if(this.img.src === 'http://127.0.0.1:5502/img/mole-work.png') {
                this.img.classList.add('mole');
                console.log(this.img.src);

            }else if(this.img.src !== 'http://127.0.0.1:5502/img/mole-work.png') {
                this.img.classList.remove('mole');
            }

            this.timeoutId = setTimeout(() => {
                this.spin();
                if(timer.classList.contains('stop') === true) {
                    clearTimeout(this.timeoutId);
                }
            }, 1000);
        }
        sectionClick() {
            const moles = document.querySelectorAll('.mole');
        let point = 0;
        for(let i =0; i < moles.length; i++ ) {
            moles[i].addEventListener('click', () => {
                // let srcDisassembly = imgSrc.split('/');
                        point++;
                        console.log(point);
                let timer = document.getElementById('timer');
                let success = document.getElementById('success');
                let good = document.getElementById('good');
                let cheer = document.getElementById('cheer');
                if(timer.classList.contains('stop') === true) {
                    if(point >= 10) {
                        success.style.display ='block';
                    }else if(9 >= point >= 4) {
                        good.style.display ='block';
                    }else if(point < 4) {
                        cheer.style.display = 'block';
                    }
                }

                });

            }






        }

    }



    const panels = [
        new Panel(),
        new Panel(),
        new Panel(),
        new Panel(),
        new Panel(),
        new Panel(),
        new Panel(),
        new Panel(),
        new Panel(),
    ];
    function timer() {
        const totalTime = 60000;
        const oldTime = Date.now();
        const timerId = setInterval(() => {
            let timer = document.getElementById('timer');
            const currentTime = Date.now();
            const diff = currentTime - oldTime;
            const remainMSec = new Date(totalTime - diff);
            const m = String(remainMSec.getMinutes()).padStart(2, '0');
            const s = String(remainMSec.getSeconds()).padStart(2, '0');
            let label = `${m}:${s} 秒`;

            if(remainMSec <= 0) {
                clearInterval(timerId);
                timer.classList.add('stop');
                timer.textContent = '0:00 秒';
                return;
            }
            timer.innerHTML = label;
        }, 100);
    }


    const btn = document.getElementById('btn__start');
    btn.addEventListener('click',() => {
        timer();
        panels.forEach(panel => {
            panel.spin();
            panel.sectionClick();

        })
    })



}

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

mac/vscode

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

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

        panels.forEach(panel => {
            panel.spin();
            panel.sectionClick();
        })

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

        sectionClick() {
            const moles = document.querySelectorAll('.mole');
        let point = 0;
        for(let i =0; i < moles.length; i++ ) {
            moles[i].addEventListener('click', () => {
//略
            }
        }

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


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

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

                let timer = document.getElementById('timer');
                let success = document.getElementById('success');
                let good = document.getElementById('good');
                let cheer = document.getElementById('cheer');
                if(timer.classList.contains('stop') === true) {
                    if(point >= 10) {
                        success.style.display ='block';
                    }else if(9 >= point >= 4) {
                        good.style.display ='block';
                    }else if(point < 4) {
                        cheer.style.display = 'block';
                    }
                }

パネルのクリックイベントに入っていますから、タイムアウト後にパネルをクリックしない限り動作しません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/05/19 22:55

    ご回答いただき、ありがとうございます。
    そして、返信が遅くなり大変申し訳ございません。

    クラスに対する理解が浅いと感じました。
    もう一度勉強します。
    それでもわからなかった際に、またご教授いただけると幸いです。
    よろしくお願いいたします。

    キャンセル

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

  • ただいまの回答率 87.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る