JavaScriptで下の画像のような16マスのルーレットを作りたいと思っています。
最終的にはjqueryを使って作成したいのですが、まずはjqueryを使わずに作成を希望しています。

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

現在、以下のようなコードを書くところまでは至っているのですが、
その後がどのように書けばいいかわからず躓いています。

javascript
1コード
2```<!DOCTYPE html>
3<html lang="ja">
4    <head>
5        <meta charset="UTF-8">
6        <title>ルーレット</title>
7        <style>            
8            table{
9                text-align: center;
10                margin-bottom:30px;
11            }
12        </style>
13        <script>
14            var interval;
15            var start_flag=false;
16            var array=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];
17            var n;
18            function start(){
19                if(start_flag===false){
20                    interval=setInterval(revolution,200);
21                    start_flag=true;
22                    document.getElementById('start').disabled=true;
23                }
24            }
25            function revolution(){
26                n=Math.floor(Math.random()*array.length);
27                var select=document.getElementsByTagName('td');
28                select.n.backgroundColor="#DF543A";
29            }
30            function stop(){
31                clearInterval(interval);
32                start_flag=false;
33                document.getElementById('start').disabled=false;
34            }
35            function reset(){
36                clearInterval(interval);
37                start_flag=false;
38                var reverse=document.getElementById('roulette');
39                reverse.style.backgroundColor='#ffffff';
40                document.getElementById('start').disabled=false;
41            }
42            window.onload=function(){
43                var revStart=document.getElementById('start');
44                revStart.addEventListener('click',start,false);
45                var revStop=document.getElementById('stop');
46                revStop.addEventListener('click',stop,false);
47                var revReset=document.getElementById('reset');
48                revReset.addEventListener('click',reset,false);
49            }
50        </script>
51    </head>
52    <body>
53        <table border="1" width="200" height="200" id="roulette">
54            <tr>
55                <td>1</td>
56                <td>2</td>
57                <td>3</td>
58                <td>4</td>
59            </tr>
60            <tr>
61                <td>5</td>
62                <td>6</td>
63                <td>7</td>
64                <td>8</td>
65            </tr>
66            <tr>
67                <td>9</td>
68                <td>10</td>
69                <td>11</td>
70                <td>12</td>
71            </tr>
72            <tr>
73                <td>13</td>
74                <td>14</td>
75                <td>15</td>
76                <td>16</td>
77            </tr>
78        </table>
79        <div id="button">
80            <button id="start">スタート</button>
81            <button id="stop">ストップ</button>
82            <button id="reset">リセット</button>
83        </div>
84    </body>
85</html>
86
87恐縮ですが、アドバイスを頂きたく、何卒よろしくお願いいたします。

maisumakun

2025/04/13 23:21

> 最終的にはjqueryを使って作成したいのですが、まずはjqueryを使わずに作成を希望しています。わざわざそのような手順を取りたい理由は何でしょうか？（jQueryなしで完成させたものを、ことさらにjQueryで書き直す理由がわからないです）

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

jQuery版

関連した質問