javascriptで16マスルーレット（再度選択されない機能の実装）

前提・実現したいこと

javascript初学者です。
下図のようなルーレットを作成しています。
![

１. スタートボタンを押すとルーレットが回転する
２. ルーレットの回転にランダム要素を組み込む
３. ルーレットが回っているときに、ストップボタンを押すとルーレットが止まる
４. ストップボタンを押した目が、ユーザに分かるようにする（目の色が変わるなど）
５. 一度ストップボタンで停止した目は次回以降は停止しない
６. スタートとストップを16回の繰り返しで、全ての目に停止する
７. 16回停止後はスタートボタンが押せなくなる(リセットボタンで押せるようになる)
８. 過去に停止した目が何か、ユーザに分かるようにする（目に色がつくなど）
９. リセットボタンを押すと初期表示の状態に戻る（もしルーレットが回っている場合はルーレットの回転が止まり、初期表示の状態になる）

という条件を満たすものを作成しています。
以前にも同じルーレットに関する質問を目にしましたが、現状で解決したい部分があり、投稿しました。

###　実現したい内容

・　１度止まった数字は、以降選択されない。

現状、この機能の実装でつまづいています。
スタートボタンを押すと、ランダムに数字を選び、色が変化します。（赤色）
ストップボタンを押すとルーレットが停止し、止まった数字に色をつけます。（ピンク）
しかし、再度スタートボタンを押すと、１度選択した数字も選ばれてしまいます。

該当のソースコード

javascript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>challenge</title>
6<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
7<style>
8    body {
9        width: 80%;
10        margin: auto;
11    }
12    table {
13        border: 3px solid black;
14        border-spacing: 0;
15        width: 300px;
16        height: 300px;
17    }
18    
19    td {
20        font-size: 1.5rem;
21        text-align: center;
22        border: 1px solid black;
23    }
24    
25    div {
26        display: flex;
27        justify-content: space-between;
28        width: 300px;
29        margin-top: 30px;
30    }
31    
32    .confirm {
33        background-color: pink;
34    }
35    
36</style>
37</head>
38<body>
39    <table>
40        <tr>
41            <td id="td1">1</td>
42            <td id="td2">2</td>
43            <td id="td3">3</td>
44            <td id="td4">4</td>
45        </tr>
46        <tr>
47            <td id="td5">5</td>
48            <td id="td6">6</td>
49            <td id="td7">7</td>
50            <td id="td8">8</td>
51        </tr>
52        <tr>
53            <td id="td9">9</td>
54            <td id="td10">10</td>
55            <td id="td11">11</td>
56            <td id="td12">12</td>
57        </tr>
58        <tr>
59            <td id="td13">13</td>
60            <td id="td14">14</td>
61            <td id="td15">15</td>
62            <td id="td16">16</td>
63        </tr>
64    </table>
65    
66    <div>
67        <button id="start">スタート</button>
68        <button id="stop">ストップ</button>
69        <button id="reset">リセット</button>
70    </div>
71    
72<script>
73let numPool = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
74let timerId;
75let randomNum = 0;
76
77// ランダムに色が変わる関数を作成
78function startRoulette () {
79    timerId = setInterval(changeColor, 30);
80}
81
82function changeColor() {
83    $('#td' + numPool[randomNum]).css("background-color", ""); 
84    randomNum = Math.floor(Math.random() * numPool.length); 
85    $('#td' + numPool[randomNum]).css("background-color", "red"); 
86}
87
88// ーーーーーースタートボタンでルーレットスタート
89$("#start").click(startRoulette);
90
91
92// ルーレットが停止する関数を作成
93function stopRoulette() {
94    clearInterval(timerId);
95    $("#td" + numPool[randomNum]).addClass("confirm");
96    numPool.splice(numPool.indexOf(randomNum), 1);
97}
98
99// ーーーーーーストップボタンでルーレット停止
100$("#stop").click(stopRoulette);
101
102</script>
103
104</body>
105</html>

補足事項

数ヶ月前に始めたばかりの初学者です。
この作品の解決のみならず、

・　コードの記述の仕方（見やすさ、コメントの使い方、書き方など）
・　練習方法
・　プログラミング学習で参考にすべきもの

などがあれば、合わせて教えていただけると幸いです。
頑張って学習していきます。
お力添えお願いいたします。

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

回答1件

ベストアンサー

コードを書いてしまうと作業依頼に答える形になるので、
考え方、実装すべきことのヒントのみの回答といたします。

一度当たったマスの情報を保持する

これが一番必要で、足りなかった部分になります。
一度当たったマスをなんらかの形で保持しておけば、ランダムで当たった時に、既に当たったマスかどうかを判別し、そうであれば、もう一度ランダム選択を走らせ、
そうでなければ当たりにします。
（その際、当たったマスとしてしっかり情報を格納します。）
0. リセットボタンを押した時に、上記もリセットする
HTMLの更新と同時に、これも大事です。
そうすれば、また、判別が可能になるかと。

あと一歩だと思いますよ。

投稿2020/10/11 13:18