編集履歴

質問編集履歴

更新したため

2020/06/19 11:54

投稿

kazu_iza

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -2,35 +2,29 @@
 4×4のマスのビンゴを作っています。
+**現状**
-スタートで回転が始まり、ランダムにマスの色が変わるようになっています。
+・スタートでマスにランダムに色がつく。（1マス以外は白のまま）
-ストップで色がその時のマスに固定されます。
+・ストップで色がその時のマスに固定されます。
-もう一度スタートを押すことで回転が始まります。
+・もう一度スタートを押すと同じようにランダムに色がつく。
-リセットを押すまでは一度ついた色は消えません。
+・リセットを押すまでは一度ついた色は消えない。
+**今後やりたいこと**
-縦、横、斜めのマスが一列でも揃えばビンゴとなり、「congratulation」の文字を出せるようにしたいです。
+・縦、横、斜めのどこか一列でも色がついて揃えばビンゴとなり、「congratulation！」の文字を出せるようにしたい。
-色が一列に揃ったときに文字を出現させる方法を教えていただきたいです。
+現在のコードに何を足せばよいか教えていただきたいです。
-またリセットを押したときに文字も消えるようにもしたいです。
-初心者です。お手数ですがわかりやすい説明でお願いいたします。
+初心者です。お手数ですが具体的なコード付きの説明だと助かります。
-### 発生している問題・エラーメッセージ
-・色が一列にそろって時に文字を表示させる方法がわからない。
-・リセットしたとき文字も消す方法がわからない。
+よろしくお願いいたします。
@@ -40,42 +34,58 @@
 ```HTML
+<!DOCTYPE html>
+<html lang="ja">
+    <head>
+        <meta charset="UTF-8">
+        <title>ルーレット</title>
+        <link rel="stylesheet" href="roulette2.css">
+        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
+    </head>
-<body>
+    <body>
-    <main>
-    <div id="result"></div>
+        <div id="result"></div>
+        <table id="t1">
-    <table>
+            <tr>
+            <td id="panel1">1</td>
+            <td id="panel2">2</td>
+            <td id="panel3">3</td>
+            <td id="panel4">4</td>
+        </tr>
         <tr>
-            <td id="panel1">1</td>
+            <td id="panel5">5</td>
-            <td id="panel2">2</td>
+            <td id="panel6">6</td>
-            <td id="panel3">3</td>
+            <td id="panel7">7</td>
-            <td id="panel4">4</td>
+            <td id="panel8">8</td>
         </tr>
         <tr>
-            <td id="panel5">5</td>
-            <td id="panel6">6</td>
-            <td id="panel7">7</td>
-            <td id="panel8">8</td>
-        </tr>
-        <tr>
             <td id="panel9">9</td>
             <td id="panel10">10</td>
@@ -98,25 +108,25 @@
         </tr>
-    </table>
+        </table>
-    <div id="btn">
+        <div id="btn">
-        <p id="start">スタート</p>
+        <button id="start">スタート</button>
-        <p id="stop">ストップ</p>
+        <button id="stop">ストップ</button>
-        <p id="reset">リセット</p>
+        <button id="reset">リセット</button>
+        <script src="roulette2.js"></script>
-    </div>
+        </div>
-    </main>
-</body>
+    </body>
+</html>
 ```
@@ -124,133 +134,91 @@
 ```Javascript
-<script type="text/javascript">
-    var interval_id
-    var number=['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16']
-    var number_origin = ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16']
-    var num;
-    function start_roulette(){
-        setTimeout(start,0)
-        interval_id=setInterval(start,800)
-            $('#start').prop('disabled',true);
-            $('#stop').prop('disabled',false);
-        }
-    function start(){
-        num=Math.floor(Math.random() * number.length);
-        for(var i =0;i <number.length;i++){
-            $('#panel'+number[i]).css('background-color','#fff');
-        }
-            $('#panel'+number[num]).css('background-color','#F58C8C');
-            console.log('#panel'+number[num]);
-    }
-    function stop(){
-        clearInterval(interval_id);
-        $('#start').prop('disabled',false);
-        $('#stop').prop('disabled',true);
-        $('#panel'+number[num]).css('background-color','#F58C8C')
-        number=number.filter(function(j){
-            return number[num] !== j;
-        })
-        if(number.length<1){
-            $('#start').prop('disabled',true);
-        }
-        num=null;
-    }
-    function reset(){
-        clearInterval(interval_id);
-        num = null;
-        $('#start').prop('disabled',false);
-        $('#stop').prop('disabled',false);
-        number=number_origin;
-        for(var i=0; i<number.length; i++){
-        $('#panel'+number[i]).css('background-color','#fff');
-        }
-    }
-    $(function(){
-        $('#start').click(start_roulette);
-        $('#stop').click(stop);
-        $('#reset').click(reset);
-    });
-    document.getElementById("result").style.visibility ="none";
-    function checkResult(){
-     const elememt = document.getElementById("result");
-     if
-        result.style.visibility="visible";
-    }
+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,800);
+         $('#start').prop('disabled',true);
+         $('#stop').prop('disabled',false);
+        }
+        function roullettestop(){
+         $('td').eq(l).css('background','#ff0000');
+         dele.splice(rand,1);
+         console.log(dele.length);
+         l=20;
+         clearInterval(id);
+         if(dele.length!==0){
+         $('#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','#F58C8C');
+         l = dele[rand]-1;
+        }
 </script>