１６マスのルーレット

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

<!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(){
        for(var i = 0; i < 4; i++){
        var a = $('<tr>');
        for(var j = 0; j < 4; j++){
        var b = i*4+j+1;
        a.append($('<td>').text(b));
        }
        $('#t1').append(a);
        }
    });
    var num=16;
    var stock=[];
    var bingo=[];
    var run; 
    var start_flag=false;
    var timerId;
    
    
    $(function(){
        $('#start').on('click',function(){
            timerId = setInterval(function(){
                run = Math.floor(Math.random()*num);
                for (var i= 0; i < 16; i++) stock.push(i);
                $('#t1 td').removeClass('selected').eq(stock[run]).addClass('selected');>
            },10);
            $('#start, #reset').prop('disabled', true);
            $('#stop').prop('diabled', false);
            function roullet_start(){
            if(start_flag === false){
                $('#start').on('click',function(){
                    start_flag = true
                });
            }
        } 
        });
        $('#stop').on('click', function(){
            clearInterval(timerId);
            start_flag = false;
            $('#t1 td').eq(stock[run]).addClass('confirm');/
            stock[run]=null;
            $('#start').prop('disabled',num<=0);
            $('#stop').prop('disabled', true);
            $('#reset').prop('diabled',false);
        });       
    });
</script>
</head>
<body>
    <table border="5" rule="all" cellspacing="0" height="400px" id="t1">              
    </table>
    <div class="con">
        <div class="sam">
            <input type="button" value="start" id="start">
            <input type="button" value="stop" id="stop">
            <input type="button" value="reset" id="reset">
        </div>
    </div>

</body>
</html>

CSS

    table {
        table-layout: fixed;
        margin: 0 auto;
        width: 400px;
    }
    
    tr {
         text-align: center;
         font-size: 50px;
         height: 100px;
         margin: auto;
    }
    td {
        
        font-size: 50px;
    }
    
    .con {
        margin: 0 auto;
        width: 400px;
    }
    
    .sam {
        margin: 0 auto;
        width: 150px;
        
    }
    .confirm{background-Color:aqua;}
    .selected{background-Color:red;}
    ```
コード