javascriptでルーレットを制作しています

前提・実現したいこと

初心者です。Javascriptでルーレットを作っています。
スタートを押した後ストップを押すと数字に止まり、その後スタートボタンを押すと再び回転するところまでは実装できました。
しかしそれ以外の以下の機能の実装がわかりません。

・一度ストップボタンで停止した目は次回以降は停止しない
・スタートとストップを16回の繰り返しで、全ての目に停止する(マスは16マス)
・過去に停止した目が何か分かるようにする（目に色がつくなど）

ヒントまたは実際のコードを教えていただきたいです。
よろしくお願いいたします

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ルーレット</title>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

    <style type="text/css">
        table,td {
            border:solid 1px black;
            font-size:70px;
            text-align:center;
        }
        #box {
            margin:auto;
            position:absolute;
            top:0px;
            bottom:0px;
            left:0px;
            right:0px;
        }
    </style>
</head>
<body>
    <script>
    $(function() {
      var l=$('#t1 td').length;
      var a
      var timerId;
       $(document).on('click','[id=start]',function() {
        timerId=setInterval(function() {
        var rand = Math.floor(Math.random() * l);
        $('#t1 td').css({"background-Color":""});
        $('#t1 td').eq(rand).css({"background-Color":"red"});
        },100);
      });
      $(document).on('click','[id=stop]',function() {
        clearInterval(timerId);
      })
    })
    </script>
    <table id="t1">
        <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>
    <button id="start">スタート</button>
    <button id="stop">ストップ</button>
    <button id="reset">リセット</button>

</body>
</html>

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

回答2件

javascript
1<!DOCTYPE html>
2<html lang="ja">
3<meta charset="UTF-8">
4<title>ルーレット</title>
5<style>
6table,td {
7    border:solid 1px black;
8    font-size:70px;
9    text-align:center;
10}
11.current {
12  background: #f00;
13}
14.false {
15  background: #ccc;
16}
17</style>
18
19
20<body>
21<table>
22  <tr><td>1<td>2<td>3<td>4
23  <tr><td>5<td>6<td>7<td>8
24  <tr><td>9<td>10<td>11<td>12
25  <tr><td>13<td>14<td>15<td>16
26</table>
27<button id="start">スタート</button>
28<button id="stop">ストップ</button>
29<button id="reset">リセット</button>
30
31<script>
32{
33  const
34    TARGET = 'td:not(.false)',
35    rnd = r => Math.floor (Math.random () * r),
36    clr = (t) => (clearInterval (t), null),
37    add = (e, ...s) => e.classList.add (...s),
38    rem = (e, ...s) => e.classList.remove (...s);
39  
40  class RT {
41    constructor (table = document.querySelector ('table'), wait = 100) {
42      this.table = table;
43      this.wait = wait;
44      this.timerId = null;
45      this.prev = null;
46    }
47    
48    start () {
49      if (! this.timerId) {
50        this.timerId = setInterval (this.loop.bind (this), this.wait);
51        if (this.prev)
52          add (this.prev, 'false');
53      }
54    }
55    
56    loop () {
57      let
58        t = this.table.querySelectorAll (TARGET),
59        e = this.prev;
60
61      if (e)
62        rem (e, 'current');
63
64      this.prev = e = t[rnd (t.length)];
65      add (e, 'current');
66    }
67    
68    stop () {
69      if (this.timerId) {
70        this.timerId = clr (this.timerId);
71        let t = this.table.querySelectorAll (TARGET);
72        if (1 === t.length) {
73          alert ('Complete !!');
74          add (t[0], 'false');
75        }
76      }
77    }
78    
79    reset () {
80      if (this.timerId)
81        this.timerId = clr (this.timerId);
82
83      this.prev = null;
84      for (let td of this.table.querySelectorAll ('td'))
85        rem (td, 'false', 'current');
86    }
87  }
88  
89  this.RT = RT;
90}
91
92//___________
93
94const R = new RT ();
95
96document.addEventListener ('click', 
97  ({target:{id}}) => /^(start|stop|reset)$/.test (id) ? R[id](): null , false);
98
99
100</script>
101
102

投稿2019/01/14 17:26

退会済みユーザー

総合スコア0

hoisan

2019/01/15 06:43

回答ありがとうございました。参考にさせていただきます。

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

以下のようにpoolに一旦データを貯めておいて、1つずつ取り出し、最終的に空っぽになれば、完了とすれば良いと思います。

js
1// ルーレットの選択肢を一旦poolしておき、
2let pool = [1, 2, 3, 4, 5, 6];
3let tid = null;
4$('#start').click(function(){
5  tid = setInterval(function(){
6    // poolに何もなくなれば完了
7    if (pool.length == 0) {
8      console.log('complete');
9      return;
10    }
11    // poolからランダムに取り出し
12    let r = Math.floor(Math.random() * pool.length);
13    console.log(pool[i]); // ここで何らかの処理
14    // poolから削除
15    pool.splice(i, 1);
16  }, 100);
17});

過去の選択肢を記録しておきたい場合も、

js
1$(selector).eq(pool[i]).css({'color': 'red'});

などとすれば、良いと思います。

投稿2019/01/14 14:39

noka_blank

総合スコア252

hoisan

2019/01/15 06:41

アドバイスありがとうございました。後ほど自分で試してみたいと思います。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

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

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