Javascriptでルーレット作成　リセットボタンで初期化の方法

前提・実現したいこと

初心者です。
16マスのルーレットを作成したのですが、リセットボタンの実装がうまくできず困っています。

1つ目はリセットボタンを押すと今までのルーレット結果を初期化し再度0から実装できる様にする
下記のコードの書き方が悪いせいか16回実装させてしまうと動かなくなる。

申し訳ございませんが知識のある方ご回答よろしくお願いします

Javascript
1$("#start").prop("disabled", hairetu <= 0);

該当のソースコード

<!DOCTYP html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JSルーレット</title>
    <script src="jquery-3.5.1.min.js"></script>
    <script>
        $(function() {
            $("#start").click(roulette_start); 
            $("#stop").click(roulette_stop);
            $("#reset").click(roulette_reset);
            
            var hairetu = new Array();
            
            for (i =0; i < 4; i++) { 
                var tr = $("<tr>");           
                for(j =0; j < 4; j++ ) {
                    var num = i *4 + j + 1; 
                    tr.append($("<td>").text(num)) 
                    hairetu.push(num-1);
                }
                $("table").append(tr)
            }

            let interval_id; 
            let lottery_kekka;
            
            function roulette_start() {
                interval_id = setInterval(lottery, 10);
                
                $("#start").prop("disabled",true);
                $("#stop, #reset").prop("disabled",false);
                $("td.tomatta_now").removeClass("tomatta_now").addClass("tomatta_ato")
            }
            
            function lottery() {
                lottery_kekka = Math.floor( Math.random() * hairetu.length);
                $("td").removeClass("tomatta")
                $("td").eq(hairetu[lottery_kekka]).addClass("tomatta")
            }
            
            function roulette_stop() {
                clearInterval(interval_id);
                $("td.tomatta").removeClass("tomatta").addClass("tomatta_now")
                hairetu.splice(lottery_kekka,1);

                $("#stop").prop("disabled", true);
                $("reset").prop("disabled", false);
                $("#start").prop("disabled", hairetu <= 0);
            }

            function roulette_reset() {
                clearInterval(interval_id);
                $("td").removeClass("tomatta_now").removeClass("tomatta_ato")
                $("#start").prop("disabled",false);
                $("#stop").prop("disabled",true);
            }
        });
    </script>
    
    <style>
        td {
            text-align: center;
            border: solid 1px #000000;
        }

        table {
                margin: auto;
                font-size: 50px;
                border: solid 5px #000000;
                border-collapse: collapse;
        }

        .button3tu {
                text-align: center;
                margin-top: 20px;
        }

        .tomatta {
                background-color: #fff000;
                /*黄色*/
        }

        .tomatta_now {
                background-color: #0000ff;
                /*青*/
        }

        .tomatta_ato {
                background-color: #FFFFCC;
                /*薄い黄色*/
        }
    </style>
</head>
<body>
    <table> 
   
    </table>
    
    <div class="button3tu">
        <button id="start">スタート</button>
        <button id="stop">ストップ</button>
        <button id="reset">リセット</button>
    </div>
</body>
</html>

試したこと

Javascript
1function roulette_reset() {

上記の関数にsetIntervalを追加

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

回答1件

ベストアンサー

配列が初期化されてないのが原因だと思ったので、

javascript
1                function roulette_reset() {
2                    clearInterval(interval_id);
3                    hairetu = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];

最後のこの関数に上記のように配列を入れてみたら一応、リセットもちゃんと動作しました。

投稿2020/08/08 12:40

Jon_do

総合スコア1373

Mackatta

2020/08/08 13:09

ご回答ありがとうございます。私も今追加して確認したところ実装できました！もしよろしければこの配列を追加した事で初期化された理由の解説もお願いしてもよろしいでしょうか？なぜこれだけで実装できたのか理解できていないので、、、

Jon_do

2020/08/08 14:57

最初にfor文で作成したhairetuは for文が起動した最初だけ中身がある状態であるため途中でhairetu.splice(lottery_kekka, 1) とやってるのでストップするたびに配列の中身が無くなります。配列には何も入っていないので質問の記述だけだと動かなくなります。なのでリセットするときに配列の中身を戻す必要がありました。

Mackatta

2020/08/08 15:30

なるほど！わかりやすい解説ありがとうございました‼︎

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