文字を出現させる方法

前提・実現したいこと

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>

行動規範の内容に同意します

回答1件

まず、指摘から。

JavaScript
1    function checkResult(){
2     const elememt = document.getElementById("result");
3     if 
4        result.style.visibility="visible";
5    }
6

ここのif文の評価条件は何になるのでしょう？
また、セミコロン;を省略すると思いもよらない結果になったりするので、処理の最後にはつけることをお勧めします。

・・・あ、この条件が知りたかったのか。

メッセージを表示したい、ということですが、
予め番号の位置が決まっているなら、どこかに定義しておいて、
それに照合させればよいのではないでしょうか？
仕様次第かと。

投稿2020/06/19 06:57

編集2020/06/19 07:08

kaputaros

総合スコア1844

kazu_iza

2020/06/19 07:08 編集

一列すべてに色がついたらです。コードが分からないため書けていません。申し訳ございません。１２３４５６７８９ 10 11 12 13 14 15 16 このようにマスが並んでいるため、一例をあげるなら、１～４までに色がついた時に文字が出るようにしたいです。文字の周りには枠をつけているのでその枠の中の色が変わります。

kaputaros

2020/06/19 07:09

あ、修正タイミング(笑) 追記してます。

kazu_iza

2020/06/19 07:16 編集

言葉足らずで申し訳ございません。定義や照合をさせる具体的なコードがわからくて苦戦しています。今はこのようなことをやってみています。(ネットから探したものです） document.getElementById("result").style.visibility ="none"; function checkResult(){ const elememt = document.getElementById("result"); if(num.includes(1)===false&& num.includes(2)===false&& num.includes(3)===false&& num.includes(4)===false){ result.style.visibility="visible"; } }

kaputaros

2020/06/19 08:23 編集

includes()は true/false を返すので、それを===で評価する必要はないです。 false が期待なら「!」を付ければ事足りますよ。 --- 配置されてる数値が固定であるなら、 var bingoPtn = [ [1,2,3,4],[5,6,7,8],[9,10,11,12],[13,14,15,16], // 横ビンゴ [1,5,9,13],[2,6,10,14],[3,7,11,15],[4,8,12,16], // 縦ビンゴ [1,6,11,16],[4,7,10,13], // 斜めビンゴ ]; のように定義しておき、別の変数に入れ、・stop()時に別変数から Array.filter() で該当数値を消す・checkResult()時にlengthが0になっているものがあればビンゴ・reset()時にビンゴパターンを元に戻すというようなものではいかがでしょうか？消す際に二重ループにはなりますが。。。

kazu_iza

2020/06/19 08:50 編集

なるほど.. 全体の流れは理解しました！図々しいお願いなのですが、もしよろしければ stop()時、checkResult()時、reset()時の細かなコードも教えていただけないでしょうか？

行動規範の内容に同意します