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

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

ただいまの
回答率

87.61%

jQueryを使ってルーレット作成

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 9,735

score 19

前提・実現したいこと

くじ引きやビンゴのような、16の番号をランダムで抽選するルーレットを作成したいです。
必須要件は以下となります。

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

発生している問題・エラーメッセージ

現在、6・8・9・10をまだ表現出来ておりません。
表現するための、ヒントや正しい表記を教えて頂けると幸いです。

該当のソースコード

    <script>
    var number = 0;
    var interval;
    $(document).ready(function(){
        for(var i = 0; i <= 13; i+=4){
            var tr = $('<tr>');
            for(var j =1; j <= 4; j++){
                var content = (i+j);
                tr.append($('<td class="num' + (i+j) + '">').text(content));
            }
            $('#roulette tbody').append(tr);
        }
        $('#start').on('click',function(){
            interval = setInterval(count, 100);
            $('#start').attr("disabled", "disabled");
            $('#stop').removeAttr("disabled");

        });

        $('#stop').on('click',function(){
            clearInterval(interval);
            $('.num' + number).css({'background-color': '#6495ed'});
            number = 0;
            $('#start').removeAttr("disabled");
            $('#stop').attr("disabled", "disabled");
        });

        $('#reset').on('click',function(){
            clearInterval(interval)
        });

        function count(){
            $('.num' + number).css({'background-color': '#ffffff'});
            number = Math.floor(Math.random() * 16);
            $('.num' + number).css({'background-color': '#f08080'});
        }

    });
    </script>
<body>
    <div id = "main">
    <table id="roulette">
        <tbody></tbody>
    </table>
    </div>
    <button id="start">start</button>
    <button id="stop">stop</button>
    <button id="reset">reset</button>
</body>
body, table {
    margin: 0 auto;
    text-align: center;
    width: 50%;
    font-family: courier;
}
table{
    border: solid 2px #a9a9a9;
    border-collapse: collapse;
    margin-top: 40px;
}
tr, td {
    border: solid 1px #a9a9a9;
}
td{
    padding: 20px;
    margin: 0;
}
button {
    margin-top: 20px;
    font-family: courier;
    background-color: #afeeee;
    border-radius: 3px;
}

試したこと

6を実行する際に下記部分をいじってみました。
$('#stop').on('click',function(){
clearInterval(interval);
$('.num' + number).css({'background-color': '#6495ed'});
number = 0;
$('#start').removeAttr("disabled");
$('#stop').attr("disabled", "disabled");
});

⇒ここに$('#start').click($('.num' + number).css({'background-color': '#6495ed'}););
を追加する

しかし、マス目ごと消えてしまいました。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+1

9はできているように思いました。
ただ、動かしてみて思ったのは、現状完全ランダムで動いているので、例えば一回目に2を選択したあと、二回目のルーレットで2を通過すると選択色が解除されてしまいます。

考えかたのヒントということなので

  1. numberではなくnumbersという配列にし、あらかじめ1-16で初期化します。
  2. ↓ここのところは
number = Math.floor(Math.random() * 16);


あとで、numbers[index]と指せるようなindexを乱数で求めます。長さは変動するのでMath.floor(Math.random() * numbers.length)みたいなことになるかと思います。

  1. そして、stopのところでは、numbersからindex番目を削除します。その後、numbersのlengthをみて0個になっていればstartをdisableにします。
    もし、9をよりわかりやすくするのであれば、過去の色を現状の選択色以外にして、startの最初で(numberに相当するindexがかわるまえに).num+indexをその過去の色にかえてあげると、直近選択中~選択までは青(水色?)、それ以前は例えば緑みたいにできるように思いました。
  2. リセットは、地道にやるしかないですね。そもそもリセットボタンは停止中しか押せなくていい気もします。1から16までで.num+xの色をリセットし、startをenable/stopをdisableにするという処理ですよね。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/01 13:27

    numbersで初期化することにより、分かりやすくなりました。
    有難うございます。

    キャンセル

checkベストアンサー

0

6

1〜16の数字を配列に格納し、配列からランダムに出目を出す。プレイのたびに出た数字を配列から取り除き(filter、splice)、次回のプレイは取り除いた後の配列を用いる。

8

6の配列が空になったらDOM要素を操作する

9

6で数字を取り除くときにその数字に対応するDOM要素を着色

10

これは初期状態に戻す処理をコーディングすればいいので特に困らないかと思います

取り急ぎ考え方の一案のみですが。
具体的な疑問がでてきたらまた聞いてください

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/01 13:26

    時間かかりましたが、spliceを使うことで謎がとけました。
    有難うございます。

    キャンセル

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

  • ただいまの回答率 87.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る