1. HOME
  2. フロントエンド
  3. 簡単なBINGO抽選器をつくってみた

簡単なBINGO抽選器をつくってみた

フロントエンド

目次

今回は授業で課題として作って途中までできていたBINGO抽選器をいろいろ機能もつけてみたので、紹介します。

デモ／完成品はこちら

HTML

HTML上にはスタート／ストップ／リスタートボタンと、既出した数字を表示しておくための表として、75までの数字を記載したtableを記述します。
上記にプラスしてルーレーット上の数字と、ルーレットが止まった時の数字の表示用として空のdivを用意します。（今回は仮にdivというid名をつけています）

HTMLソース

<input type="button" value="START" id="start">
<input type="button" value="STOP" id="stop">
<input type="button" value="ReSTART" id="restart">
<div id="div"></div>
<table>
     <tr>
          <th>B</th>
          <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
          <td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
          <td>11</td><td>12</td><td>13</td><td>14</td><td>15</td>
     </tr>
     <tr>
          <th>I</th>
          <td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
          <td>21</td><td>22</td><td>23</td><td>24</td><td>25</td>
          <td>26</td><td>27</td><td>28</td><td>29</td><td>30</td>
     </tr>
     <tr>
           <th>N</th>
          <td>31</td><td>32</td><td>33</td><td>34</td><td>35</td>
          <td>36</td><td>37</td><td>38</td><td>39</td><td>40</td>
          <td>41</td><td>42</td><td>43</td><td>44</td><td>45</td>
     </tr>
     <tr>
          <th>G</th>
          <td>46</td><td>47</td><td>48</td><td>49</td><td>50</td>
          <td>51</td><td>52</td><td>53</td><td>54</td><td>55</td>
          <td>56</td><td>57</td><td>58</td><td>59</td><td>60</td>
     </tr>
     <tr>
           <th>O</th>
          <td>61</td><td>62</td><td>63</td><td>64</td><td>65</td>
          <td>66</td><td>67</td><td>68</td><td>69</td><td>70</td>
          <td>71</td><td>72</td><td>73</td><td>74</td><td>75</td>
     </tr>
</table>

jQuery

新しい配列を宣言する

var array = [];

変数「value」を宣言し、その中には乱数の整数1~75までを発生させる文を記載します

var value = Math.floor(Math.random() *75)+1;

ルーレットで使用する変数をスコープに引っかからないように、一度グローバル変数として宣言しておきます

var timer = null;

スタートボタンクリック時

次に押すボタンがわかりやすいように背景色を変更するようにします
今回は次に押されるべきボタンを「#ccc」にしています。

$('#start').css('background-color','#fff');
$('#stop').css('background-color','#ccc');

ボタンの2度押し防止のための文を記述します
クリックしたものに「disabled属性」を付与し、要素の無効化をします。
その後もう一度押せるようにするために「disabled属性」を取りのぞいています。

$('#start').attr("disabled", "disabled");
$('#stop').removeAttr("disabled");

数字のルーレット表示を設定します
Randomという変数をつけたfunctionnaiで乱数を繰り返し生成し、それを#divのついた空div内に表示しています。
setIntervalで先ほどのRandomを実行し、ルーレットを表示しています。
速度は70で指定してあり数字を小さくするほどルーレットの回転は速くなります。

timer = setInterval(Random,70);
function Random(){
      value = Math.floor(Math.random() *75)+1;
       $('#div').text(value);
};

スタートボタンクリック時のソース

$('#start').click(function(){

     //次に押すボタンがわかりやすいように背景色の変更
     $('#start').css('background-color','#fff');
     $('#stop').css('background-color','#ccc');

     //ボタンの2度押しの防止
     $('#start').attr("disabled", "disabled");
     $('#stop').removeAttr("disabled");

     timer = setInterval(Random,70);
     function Random(){
           value = Math.floor(Math.random() *75)+1;
           $('#div').text(value);
     };

});

ストップボタンクリック時

スタートボタン時の反対に背景色の変更をします。

$('#stop').css('background-color','#fff');
$('#start').css('background-color','#ccc');

スタートボタン時とは反対にストップボタンを無効化し、スタートボタンを有効化します

$('#start').removeAttr("disabled");
$('#stop').attr("disabled", "disabled");

ルーレットを停止するためにclearIntervalをかけます

clearInterval(timer);



出た数字の振り分け

出た乱数を最初に宣言した配列に格納し、その配列内を検索し、数字がない場合は配列に格納。すでにある場合はないものが出るまで乱数を発生させるということをします。

jQuery.inArray(value, array )で配列内を検索します。（valueは発生させた乱数です）
数字がすでに配列にある場合はインデックス番号が返ってくるため「0以上」が返ってきます。
0以上が帰ってきた場合は再び乱数を発生させます。
配列にない数字が出るまで、乱数を発生させたいため、while文でループさせます。

while(jQuery.inArray(value, array )  >= 0){
       value = Math.floor(Math.random() *75)+1;
}

上記同様、jQuery.inArray(value, array )で配列内を検索します。（valueは発生させた乱数です）
配列にない数字の場合は「-1」が返ってきます。
配列にないということは新しい数字のため、これを配列に格納し、#divの空divに表示します。

if(jQuery.inArray(value, array )  == -1){
       array.push(value);
       $('#div').text(value);
};

$.each()で配列内を順番に処理し、配列にある数字＝すでに出た数字は、表の数字に色がつくようにします。
$.each(array, function(i, num)でarrayの配列を順番に処理しています。
「i」にはインデックス番号、「num」には要素の値（＝今回の場合は出た数字）が渡されます。
numと.eqを使いtdに背景色をつけます。
tdには.eqで何番目の要素を塗るかを指定しますが、tdの要素の番号は0から始まるため、numとは1のずれが出るので、(num-1)とします。

$.each(array, function(i, num) {
       $('td').eq(num-1).css({
            'background-color':'#333',
            'color':'#fff'
      });
});

ストップボタンクリック時のソース

$('#stop').click(function(){

       $('#stop').css('background-color','#fff');
       $('#start').css('background-color','#ccc');

       $('#start').removeAttr("disabled");
       $('#stop').attr("disabled", "disabled");

       clearInterval(timer);

        while(jQuery.inArray(value, array )  >= 0){
              value = Math.floor(Math.random() *75)+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':'#333',
                     'color':'#fff'
               });
       });

});

リスタートボタンクリック時

リスタートする場合はウインドウ自体をリロードさせています

$('#restart').click(function(){
      location.reload();
});

全ソース

<body>

   <img src="bingo.svg"><br>

    <input type="button" value="START" id="start">
    <input type="button" value="STOP" id="stop">
    <input type="button" value="ReSTART" id="restart">
    <div id="div"></div>
    <table>
        <tr>
            <th>B</th>
            <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
            <td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
            <td>11</td><td>12</td><td>13</td><td>14</td><td>15</td>
        </tr>
        <tr>
            <th>I</th>
            <td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
            <td>21</td><td>22</td><td>23</td><td>24</td><td>25</td>
            <td>26</td><td>27</td><td>28</td><td>29</td><td>30</td>
        </tr>
        <tr>
            <th>N</th>
            <td>31</td><td>32</td><td>33</td><td>34</td><td>35</td>
            <td>36</td><td>37</td><td>38</td><td>39</td><td>40</td>
            <td>41</td><td>42</td><td>43</td><td>44</td><td>45</td>
        </tr>
        <tr>
            <th>G</th>
            <td>46</td><td>47</td><td>48</td><td>49</td><td>50</td>
            <td>51</td><td>52</td><td>53</td><td>54</td><td>55</td>
            <td>56</td><td>57</td><td>58</td><td>59</td><td>60</td>
        </tr>
        <tr>
            <th>O</th>
            <td>61</td><td>62</td><td>63</td><td>64</td><td>65</td>
            <td>66</td><td>67</td><td>68</td><td>69</td><td>70</td>
            <td>71</td><td>72</td><td>73</td><td>74</td><td>75</td>
        </tr>
    </table>

    <div class="text">
        <p>[↑]でスタート<br>
           [↓]でストップ<br>
            [shift]で再スタート</p>
    </div>
</body>

<script>
$(function(){
        var array = [];
        var value = Math.floor(Math.random() *75)+1;
        var timer = null;

        $('#start').click(function(){

                //次に押すボタンがわかりやすいように背景色の変更
                $('#start').css('background-color','#fff');
                $('#stop').css('background-color','#ccc');

                //ボタンの2度押しの防止
                $('#start').attr("disabled", "disabled");
                $('#stop').removeAttr("disabled");

                timer = setInterval(Random,70);
                function Random(){
                value = Math.floor(Math.random() *75)+1;
                $('#div').text(value);
        };
});

$('#stop').click(function(){

        $('#stop').css('background-color','#fff');
        $('#start').css('background-color','#ccc');

        $('#start').removeAttr("disabled");
        $('#stop').attr("disabled", "disabled");

        clearInterval(timer);

         while(jQuery.inArray(value, array )  >= 0){
                  value = Math.floor(Math.random() *75)+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':'#333',
                     'color':'#fff'
                });
        });

});

$('#restart').click(function(){
        location.reload();
});

});

おまけでキーイベント

これで完成なのですが、ipad,スマートフォンなどのタッチデバイスだとボタンを押せるから楽だけど、
PCとなるとカーソルを移動させるのが意外と面倒だな・・・ということでキーイベントもつけてみました。

「↑」でスタート
「↓」でストップ
「shift」でリスタート（リロード）になっています。
押されたキーのキー番号によって判別しています。

$(window).keyup(function(e){
        switch(e.which){
            case 38:
                $('#start').click();
               break;

            case 40:
                $('#stop').click();
                break;

            case 16:
                $('#restart').click();
                break;
        }
});

デモ／完成品はこちら

BINGO
jQuery

この記事を読んだ方におすすめ

jQueryでinputからリアルタイムで取得する

jQueryでinputからリアルタイムで取得する

jQueryで文字列を分割したり、特定の文字以降を削除する

jQueryでできる簡易ローディング画面の実装方法
SVGアニメーション「Lazy Line Painter」

SVGアニメーション「Lazy Line Painter」

幾何学的なアニメーションの実装