jqueryでルーレットを作る

初心者です。以下の１~11を満たしたルーレットを作成しているところです。
6～10をどのように実装すればよいか、分かりません。。。。
どのように実装すべきか教えて頂ければ幸いです。
何卒よろしくお願いいたします。

1.ルーレットの目を16個作成する
2.スタートボタンを押すとルーレットが回転する
3.回転中はスタートボタンを押せなくする（ストップボタンで再び押せるようになる）
4.ルーレットの回転にランダム要素を組み込む
5.ルーレットが回っているときに、ストップボタンを押すとルーレットが止まる
6.ストップボタンを押した目が、ユーザに分かるようにする（目の色が変わるなど）
7.一度ストップボタンで停止した目は次回以降は停止しない
8.スタートとストップを16回の繰り返しで、全ての目に停止する
9.16回停止後はスタートボタンが押せなくなる(リセットボタンで押せるようになる)
10.過去に停止した目が何か、ユーザに分かるようにする（目に色がつくなど）
11.リセットボタンを押すと初期表示の状態に戻る（もしルーレットが回っている場合は12.ルーレットの回転が止まり、初期表示の状態になる）
（ソースコード）比較演算子は、「===」や「!==」を利用すること

現在ここまで作っています。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="roulette.css">
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
     $(function(){
    var number = 0;
    var interval_id,td;
    for (var j = 0; j <= 12; j+=4){
        var tr = $("<tr>");
        for (var i = 1; i <= 4; i++){
        td = $('<td class="num' + (i+j) +'">');
        td.html(i+j);
        tr.append(td);
        }
        $("#matrix").append(tr); 
     
    }
    
    $("#start").on("click",function(){
        interval = setInterval(count,100);
        $("#start").prop("disabled",true);
     });
     
     $("#stop").on("click",function(){
        clearInterval(interval);
        $("#start").prop("disabled",false);
        
     });
     
     $("#reset").on("click",function(){
        clearInterval(interval);
        $(".num" + number).css("background-color","#ffffff");
        $("#start").prop("disabled",false);
        
     });
     
     function count(){
      $(".num" + number).css("background-color","#ffffff");
      number = 1 + Math.floor(Math.random()*16);
      $(".num" + number).css("background-color","#f08080");
     }
    
    });
    
    </script>

    </head>
    <body>
    <div id="rouolette">
     <table id="matrix">
        
        </table>
       <div id="button_erea">
            <button id ="start">スタート</button>
            <button id ="stop">ストップ</button>
        <button id ="reset">リセット</button>
        </div>
    </div>
    </body>
</html>

m.ts10806

2020/02/08 19:35

作業依頼になってます。もっと問題を1点にしぼって自分でやってみて、それでも分からないことを聞くようにしてください（質問は編集できます）

momokae0416

2020/02/09 08:44

投稿のルールの認識不足で大変失礼いたしました。解決いたしましたので、自己解決方法を記入し解決とさせていただきます。

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

回答1件

自己解決

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="roulette.css">
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script>
            $(function(){
               var number = 0;
               var numbers =new Array();
               for (var i =1; i<=16; i++){
                   numbers.push(i);
               }
               var interval_id,tr,td;
               for (var j = 0; j <= 12; j+=4){
               tr = $("<tr>");
               for (var i = 1; i <= 4; i++){
               td = $('<td class="num' + (i+j) +'">');
               td.html(i+j);
               tr.append(td);
               }
               $("#matrix").append(tr); 
     
               }  
            
            
                $("#start").on("click",function(){
                    interval = setInterval(count,100);//ルーレット動かす
                    $("#start").prop("disabled",true);//ルーレット動作中はスタートボタン押せないようにする
                    $("#stop").prop("disabled",false);//ルーレット動作中はストップボタンを押せるようにする
                });
                 
                $("#stop").on("click",function(){
                    clearInterval(interval);//1-16の数字の選択を止める
                    numbers.splice(index,1);//配列のキー＋1が値。配列の中から、ストップ時に選択した配列の中の値を消す
                    console.log(numbers);
                    if (numbers.length === 0){// 配列の中身が0になったら
                        $("#start").prop("disabled",true);//スタートボタンを押せなくする
                    } else if(numbers.length !== 0){// 配列の中身が0以外の場合、
                        $("#start").prop("disabled",false);//スタートボタンを押せなくする
                    }
                    $(".num" + number).addClass("stop");//ストップの時に選択したマスの背景をピンクにする。
                    $("#stop").prop("disabled",true);//ストップの二度押し禁止
                });
                 
                 $("#reset").on("click",function(){
                    clearInterval(interval);//ルーレット動作を止める
                    $("td").removeClass("count stop");//すべてのマスを白に戻す
                    $("#start").prop("disabled",false);//スタートボタンを押せるようにする
                    for (var i =1; i<=16; i++){
                    numbers.push(i);
                    }
                    $("#stop").prop("disabled",true);
                 });
                 
                 function count(){
                  $(".num" + number).removeClass("count");//まずは背景白
                  index = Math.floor(Math.random() * numbers.length);//0-15のランダムな数字をindexで取得
                  number = numbers[index];//配列の中から1-16の数字を変数numberで取得
                  $(".num" + number).addClass("count");//選択されたマスが赤色
                 }
    
            });
    
    </script>

    </head>
    <body>
      <div id="rouolette">
        <table id="matrix">
        
        </table>
       <div id="button_erea">
            <button id ="start">スタート</button>
            <button id ="stop">ストップ</button>
            <button id ="reset">リセット</button>
       </div>
      </div>
    </body>
</html>

投稿2020/02/09 08:45

momokae0416

総合スコア9