完全初心者です、、、
下記を満たすルーレットを作成しておりますが、上手くいかず壁にぶつかっております。
1.ルーレットの目を16個作成する
2.スタートボタンを押すとルーレットが回転する
3.ルーレットの回転にランダム要素を組み込む
4.ルーレットが回っているときに、ストップボタンを押すとルーレットが止まる
5.一度ストップボタンで停止した目は次回以降は停止しない
6.スタートとストップを16回の繰り返しで、全ての目に停止する
7.過去に停止した目が何か、ユーザに分かるようにする(目に色がつくなど)
8.リセットボタンを押すと初期表示の状態に戻る(もしルーレットが回っている場合はルーレットの回転が止まり、初期表示の状態になる)
9.(ソースコード)比較演算子は、「===」や「!==」を利用すること
10.スタートボタンを押すと、マス目の色を順に変えることでルーレットが回転しているように見せる。(1から16まで順番でなく、ランダムに色が変わる)
###発生している問題
・そもそもルーレットが回転しているように見えない。
・比較演算をどこで利用すればいいか思いつかない。
・16マス全てに色がついた後に、ボタンを押すと無限ループになる。
###該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ルーレット</title> <link rel="stylesheet" href="roulette.css"> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript"> $(function(){ var array = []; var value = Math.floor(Math.random() *16)+1; var timer = null; $('#start').click(function(){ $('#start').css('background-color','red'); $('#stop').css('background-color','blue'); $('#start').attr("disabled","disabled"); $('#stop').removeAttr("disabled"); timer = setInterval(Random,10); function Random(){ value = Math.floor(Math.random() *16)+1; $('#div').text(value); } }); $('#stop').click(function(){ $('#stop').css('background-color','red'); $('#start').css('background-color','blue'); $('#start').removeAttr("disabled"); $('#stop').attr("disabled","disabled"); clearInterval(timer); while(jQuery.inArray(value, array) >= 0){ value = Math.floor(Math.random() *16)+1; } if(jQuery.inArray(value, array) == -1){ array.push(value); $('#div').text(value); }; $.each(array, function(i, num) { $('td').eq(num-1).css({ 'background-color':'red', 'color':'white' }); }); }); $('#reset').click(function(){ location.reload(); }); }); </script> </head> <body> <table> <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> <input type="button" value="start" id="start"> <input type="button" value="stop" id="stop"> <input type="button" value="reset" id="reset"> <div id="div"></div> </body> </html>
table, tr, td { border: solid 1px; } td { padding: 5px; text-align:center; }
回答2件
あなたの回答
tips
プレビュー