ルーレット作成のエラーについて

前提・実現したいこと

JavaScript、jQueryで16マスのルーレットシステムを作っています。
スタートを押すと1~16がランダムで光り、ストップを押した時に色が変わる。
もう1度スタートを押すと、止まったマス以外がランダムで光る。
これを16回繰り返して、リセットすると元に戻る機能を実装中に以下のエラーが発生しました。

発生している問題

●スタート、ストップを交互に16回押すことで全てのマス目の色がつきません。
一度止まって色がついたマスに止まっているようです。

該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>12章課題</title> <link rel="stylesheet" href="roulette.css"> <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> <script> // 変数を定義 var interval_id; var stop_box = 0; var flash_block = 0; var is_start = false; var flash_block_num =0; var block = ['#b_1','#b_2','#b_3','#b_4','#b_5','#b_6','#b_7','#b_8','#b_9','#b_10','#b_11','#b_12','#b_13','#b_14','#b_15','#b_16']; //startをClickした時に実行 function flash_start () { if (is_start === false) { is_start = true; flash_box(); interval_id = setInterval(flash_box, 500); //startの二度押し不可でstopが押せるようになる $('#start').prop('disabled', true); $('#stop').prop('disabled', false); } } function flash_box() { //色が変わってる時だけcssを外す if (flash_block !== 0) { $(flash_block).removeClass('b_color'); } //block1~16をランダムに色を変える flash_block_num = Math.floor(Math.random() * block.length);//配列の数だけを取り出す flash_block = block[ flash_block_num ];//配列の中のblockを指定 $(flash_block).addClass('b_color');//blockのみ色を変える } //stopを押した時に実行 function flash_stop() { // setIntervalによる繰り返し動作を停止 clearInterval(interval_id); stop_box = flash_block; //配列の中のblockを代入 //選択したblockの色を変える $(stop_box).addClass('s_color'); //配列から取り出した数を削除する block.splice(flash_block_num, 1); $('#start').prop('disabled',block.length<=0); $('#stop').prop('disabled',true); $('#reset').prop('disabled',false); is_start = false; } //resetを押した時に実行 function flash_reset() { // setIntervalによる繰り返し動作を停止 clearInterval(interval_id); //全てのcssを削除 $('div').removeClass('b_color'); $('div').removeClass('s_color'); $('#stop').prop('disabled', true); $('#start').prop('disabled', false); //配列を元に戻す block.push('#b_1','#b_2','#b_3','#b_4','#b_5','#b_6','#b_7','#b_8','#b_9','#b_10','#b_11','#b_12','#b_13','#b_14','#b_15','#b_16'); is_start = false; }

    window.onload = function() {
        $('#start').prop('disabled', false);
        $('#reset').prop('disabled', false);
        $('#stop').prop('disabled', true);
        $('#start').click(flash_start);
        $('#stop').click(flash_stop);
        $('#reset').click(flash_reset);
    }

</script> </head> <body> <div id="large_block"> <div id="b_1">1</div> <div id="b_2">2</div> <div id="b_3">3</div> <div id="b_4">4</div> <div id="b_5">5</div> <div id="b_6">6</div> <div id="b_7">7</div> <div id="b_8">8</div> <div id="b_9">9</div> <div id="b_10">10</div> <div id="b_11">11</div> <div id="b_12">12</div> <div id="b_13">13</div> <div id="b_14">14</div> <div id="b_15">15</div> <div id="b_16">16</div> </div> <div id="btn"> <button id="start">スタート</button> <button id="stop">ストップ</button> <button id="reset">リセット</button> </div> </div> </body> </html>

試したこと

ストップを押すとblock.splice(flash_block_num, 1);で配列から1つずつ削除しているはずなのですが
なぜか止まったマスに再度止まってしまいます。
色々と調べてみましたがどこが間違っているか分かりません。

ヒントを頂けないでしょうか？
よろしくお願いします。

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

回答1件

ベストアンサー

こんな感じでやれば、配列などで管理しなくてもよいのでは？

codepen random roulette

投稿2020/10/28 03:51

編集2020/10/28 03:56

yambejp

総合スコア116724

yambejp

2020/10/28 03:51

$(function(){ var timerId; $('#start').on('click',function(){ clearInterval(timerId); var sel=$('#large_block div:not(.selected)'); timerId=setInterval(function(){ $('.active').removeClass('active'); var idx=parseInt(Math.random()*sel.length); sel.eq(idx).addClass('active'); },100); }); $('#stop').on('click',function(){ $('.active').addClass('selected').removeClass('active'); clearInterval(timerId); }); $('#reset').on('click',function(){ clearInterval(timerId); $('.active').removeClass('active'); $('.selected').removeClass('selected'); }); });

yambejp

2020/10/28 03:51

//CSS .active{ background-Color:yellow; } .selected{ background-Color:red; } #large_block{ display:flex; flex-wrap:wrap; } #large_block div{ width:24%; }