【jQuery】jQueryで16マスルーレットを作成せよ

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

＊disabled属性を利用
＊disabled属性を利用がわからない場合はフラグ管理でも良い"

```javascript
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>16マスルーレット</title>
    <style>
table {
    border-collapse: collapse;
    border: solid 3px;
    width: 300px;
    height: 300px;
    margin: 30px;
}

td {
    border: solid 1px;
    text-align: center;
    font-size: 20px;
}
#button {
    width: 360px;
    display: flex;
    justify-content: center;
}
button {
    margin: 0 5px;
    padding: 3px;
    width: 20%;
}

.random-select {
    background-color: #ffb6c1;
}
.stop-select {
    background-color: #ff1493;
}
.commit-select {
    color: #808080;
    background-color: #ffdab9;
}

     </style>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
      var interval;
      var array = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
      var num;

      $(function() {

    
        $('#start').click(start_rt);
        $('#stop').click(stop_rt);
        $('#reset').click(reset_rt);

        
        function start_rt() {
          interval = setInterval(roulette, 50);
            $('.stop-select').removeClass('stop-select').addClass('commit-select');　
            $('#start').prop('disabled', true);
            $('#stop, #reset').prop('disabled', false);
        }
    
        function roulette() {
            num = Math.floor(Math.random() * array.length); 
            $('td').removeClass('random-select');
            $('td').eq(array[num]).addClass('random-select');      
          
        }
    
        function stop_rt() {
            clearInterval(interval);
            $('.random-select').addClass('stop-select'); 
            array.splice(num,1);                                  

            $('#start, #reset').prop('disabled', false);
            $('#stop').prop('disabled', true);
            
            if (array.length === 0) {
                $('#start').prop('disabled', true);
            }
        }
        
        function reset_rt() {
            clearInterval(interval);
            $('td').removeClass();
            $('#start').prop('disabled', false);
            $('#reset, #stop').prop('disabled', true);
            
            array = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
        }
      });
      
      </script>
<body>
    <table id="roulette">
      <tr>
        <td>1</td><td>2</td><td>3</td><td>4</td>
      </tr>
      <tr>
        <td>5</td><td>6</td><td>7</td><td>8</td>
      </tr>
      <tr>
        <td>9</td><td>10</td><td>11</td><td>12</td>
      </tr>
      <tr>
        <td>13</td><td>14</td><td>15</td><td>16</td>
      </tr>
  </table>    
  <div id="button">
      <button id="start">スタート</button>
      <button id="stop" disabled="">ストップ</button>
      <button id="reset" disabled="">リセット</button>
  </div>
</html>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954863/c49b403f-9824-916a-e088-bb1b23de7da2.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954863/3422613d-785c-8ee9-3e9d-1999a54cb4cc.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954863/35be9b74-6a20-0940-9d0d-10a4c8db7d75.png)