前提・実現したいこと
4×4のマスのビンゴを作っています。
現状
・スタートでマスにランダムに色がつく。(1マス以外は白のまま)
・ストップで色がその時のマスに固定されます。
・もう一度スタートを押すと同じようにランダムに色がつく。
・リセットを押すまでは一度ついた色は消えない。
今後やりたいこと
・縦、横、斜めのどこか一列でも色がついて揃えばビンゴとなり、「congratulation!」の文字を出せるようにしたい。
現在のコードに何を足せばよいか教えていただきたいです。
初心者です。お手数ですが具体的なコード付きの説明だと助かります。
よろしくお願いいたします。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>ルーレット</title> 6 <link rel="stylesheet" href="roulette2.css"> 7 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 8 </head> 9 <body> 10 11 <div id="result"></div> 12 13 <table id="t1"> 14 <tr> 15 <td id="panel1">1</td> 16 <td id="panel2">2</td> 17 <td id="panel3">3</td> 18 <td id="panel4">4</td> 19 </tr> 20 <tr> 21 <td id="panel5">5</td> 22 <td id="panel6">6</td> 23 <td id="panel7">7</td> 24 <td id="panel8">8</td> 25 </tr> 26 <tr> 27 <td id="panel9">9</td> 28 <td id="panel10">10</td> 29 <td id="panel11">11</td> 30 <td id="panel12">12</td> 31 </tr> 32 <tr> 33 <td id="panel13">13</td> 34 <td id="panel14">14</td> 35 <td id="panel15">15</td> 36 <td id="panel16">16</td> 37 </tr> 38 </table> 39 40 <div id="btn"> 41 <button id="start">スタート</button> 42 <button id="stop">ストップ</button> 43 <button id="reset">リセット</button> 44 <script src="roulette2.js"></script> 45 </div> 46 </body> 47</html>
Javascript
1var l = 20; 2var id, rand; 3var dele = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]; 4 $(function() { 5 $('#start').click(roullettestart); 6 $('#stop').click(roullettestop); 7 $('#reset').click(roullettereset); 8 $('#stop').prop('disabled',true); 9 }); 10 11 function roullettestart(){ 12 id = setInterval(round,800); 13 $('#start').prop('disabled',true); 14 $('#stop').prop('disabled',false); 15 } 16 17 function roullettestop(){ 18 $('td').eq(l).css('background','#ff0000'); 19 dele.splice(rand,1); 20 console.log(dele.length); 21 l=20; 22 clearInterval(id); 23 if(dele.length!==0){ 24 $('#start').prop('disabled',false); 25 } 26 $('#stop').prop('disabled',true); 27 } 28 29 function roullettereset(){ 30 $('td').css('background','#ffffff'); 31 l = 20; 32 dele=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]; 33 clearInterval(id); 34 $('#start').prop('disabled',false); 35 $('#stop').prop('disabled',true); 36 } 37 38 function round(){ 39 $('td').eq(l).css('background','#ffffff'); 40 rand =Math.floor(Math.random() * dele.length); 41 $('td').eq(dele[rand]-1).css('background','#F58C8C'); 42 l = dele[rand]-1; 43 } 44</script>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/19 07:08 編集
2020/06/19 07:09
2020/06/19 07:16 編集
2020/06/19 08:23 編集
2020/06/19 08:50 編集