ルーレットを完成させたいです。
下記の要件を満たしたルーレットを作成しています。9番のルーレットが16回停止後はスタートボタが押せなくなる(リセットボタンで押せる様になる)だけどうしてもできません。
”16回停止後”というのをどの様に書いたら良いのか分かりません。
アドバイスをお願いします。
1.ルーレットの目を16個作成する
2.スタートボタンを押すとルーレットが回転する
3.回転中はスタートボタンを押せなくする(ストップボタンで再び押せるようになる)
4.ルーレットの回転にランダム要素を組み込む
5.ルーレットが回っているときに、ストップボタンを押すとルーレットが止まる
6.ストップボタンを押した目が、ユーザに分かるようにする(目の色が変わるなど)
7.一度ストップボタンで停止した目は次回以降は停止しない
8.スタートとストップを16回の繰り返しで、全ての目に停止する
9.16回停止後はスタートボタンが押せなくなる(リセットボタンで押せるようになる)
10.過去に停止した目が何か、ユーザに分かるようにする(目に色がつくなど)
11.リセットボタンを押すと初期表示の状態に戻る(もしルーレットが回っている場合はルーレットの回転が止まり、初期表示の状態になる)
発生している問題・エラーメッセージ
エラーメッセージはありません
該当のソースコード
<html lang="ja"> <head> <meta charset="UTF-8"> <title>ルーレット</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> var l = 20; var id, rand; var dele = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]; $(function() { $('#start').click(roullettestart); $('#stop').click(roullettestop); $('#reset').click(roullettereset); $('#stop').prop('disabled',true); }); function roullettestart(){ id = setInterval(round,100); $('#start').prop('disabled',true); $('#stop').prop('disabled',false); if(count(dele)===0){ $('#start').prop('disabled',true); } } function roullettestop(){ $('td').eq(l).css('background','orange'); dele.splice(rand,1); console.log(dele); l=20; clearInterval(id); $('#start').prop('disabled',false); $('#stop').prop('disabled',true); } function roullettereset(){ $('td').css('background','#ffffff'); l = 20; dele=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]; clearInterval(id); $('#start').prop('disabled',false); $('#stop').prop('disabled',true); } function round(){ $('td').eq(l).css('background','#ffffff'); rand =Math.floor(Math.random() * dele.length); $('td').eq(dele[rand]-1).css('background','#ff0000'); l = dele[rand]-1; } </script> <style> table,td { border:solid 1px black; font-size:70px; text-align:center; } </style> </head> <body> <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>
試したこと
下記の記述をしました。
if(count(dele)===0){
$('#start').prop('disabled',true);
}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/02/27 17:36