前提・実現したいこと
くじ引きやビンゴのような、16の番号をランダムで抽選するルーレットを作成したいです。
必須要件は以下となります。
1.ルーレットの目を16個作成する
2.スタートボタンを押すとルーレットが回転する
3.回転中はスタートボタンを押せなくする(ストップボタンで再び押せるようになる)
4.ルーレットの回転にランダム要素を組み込む
5.ルーレットが回っているときに、ストップボタンを押すとルーレットが止まる
6.一度ストップボタンで停止した目は次回以降は停止しない
7.スタートとストップを16回の繰り返しで、全ての目に停止する
8.16回停止後はスタートボタンが押せなくなる(リセットボタンで押せるようになる)
9.過去に停止した目が何か、ユーザに分かるようにする(目に色がつくなど)
10.リセットボタンを押すと初期表示の状態に戻る(もしルーレットが回っている場合はルーレットの回転が止まり、初期表示の状態になる)
11.(ソースコード)比較演算子は、「===」や「!==」を利用すること
発生している問題・エラーメッセージ
現在、6・8・9・10をまだ表現出来ておりません。
表現するための、ヒントや正しい表記を教えて頂けると幸いです。
該当のソースコード
jQuery
1 <script> 2 var number = 0; 3 var interval; 4 $(document).ready(function(){ 5 for(var i = 0; i <= 13; i+=4){ 6 var tr = $('<tr>'); 7 for(var j =1; j <= 4; j++){ 8 var content = (i+j); 9 tr.append($('<td class="num' + (i+j) + '">').text(content)); 10 } 11 $('#roulette tbody').append(tr); 12 } 13 $('#start').on('click',function(){ 14 interval = setInterval(count, 100); 15 $('#start').attr("disabled", "disabled"); 16 $('#stop').removeAttr("disabled"); 17 18 }); 19 20 $('#stop').on('click',function(){ 21 clearInterval(interval); 22 $('.num' + number).css({'background-color': '#6495ed'}); 23 number = 0; 24 $('#start').removeAttr("disabled"); 25 $('#stop').attr("disabled", "disabled"); 26 }); 27 28 $('#reset').on('click',function(){ 29 clearInterval(interval) 30 }); 31 32 function count(){ 33 $('.num' + number).css({'background-color': '#ffffff'}); 34 number = Math.floor(Math.random() * 16); 35 $('.num' + number).css({'background-color': '#f08080'}); 36 } 37 38 }); 39 </script>
HTML
1<body> 2 <div id = "main"> 3 <table id="roulette"> 4 <tbody></tbody> 5 </table> 6 </div> 7 <button id="start">start</button> 8 <button id="stop">stop</button> 9 <button id="reset">reset</button> 10</body>
CSS
1body, table { 2 margin: 0 auto; 3 text-align: center; 4 width: 50%; 5 font-family: courier; 6} 7table{ 8 border: solid 2px #a9a9a9; 9 border-collapse: collapse; 10 margin-top: 40px; 11} 12tr, td { 13 border: solid 1px #a9a9a9; 14} 15td{ 16 padding: 20px; 17 margin: 0; 18} 19button { 20 margin-top: 20px; 21 font-family: courier; 22 background-color: #afeeee; 23 border-radius: 3px; 24}
試したこと
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'}););
を追加する
しかし、マス目ごと消えてしまいました。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/01 04:27