【javascript】どこでもBINGO大会！その2 【ビンゴカード】

taka_oj
|
2020年4月16日
| コメントはまだありません
| JavaScript

今回はビンゴカードを作ってみました！
外出自粛ムードなのでなかなか集まってなにかするのが難しい状況ですが、これと前回のbingoを合わせてLINEなどのコミュニケーションツールを使えば、離れた相手ともビンゴができちゃいますよっ！
デモの出てくる数字は１～８０の間ですのでお好みにあわせてカスタマイズしてみてくださいね！
少しソースサンプルが長いですがご容赦を！

↓以下が実際のソースサンプルです。

▼html

    <body>
    <div id="container">
      <table>
        <tr>
          <th>B</th>
          <th>I</th>
          <th>N</th>
          <th>G</th>
          <th>O</th>
        </tr>
        <tr>
          <td id="bgcNo0">
            <input name="CBox" type="checkbox" id="chuo1" />
            <div><label for="chuo1"></label></div>
          </td>
          <td id="bgcNo1">
            <input name="CBox" type="checkbox" id="chuo2" />
            <div><label for="chuo2"></label></div>
          </td>
          <td id="bgcNo2">
            <input name="CBox" type="checkbox" id="chuo3" />
            <div><label for="chuo3"></label></div>
          </td>
          <td id="bgcNo3">
            <input name="CBox" type="checkbox" id="chuo4" />
            <div><label for="chuo4"></label></div>
          </td>
          <td id="bgcNo4">
            <input name="CBox" type="checkbox" id="chuo5" />
            <div><label for="chuo5"></label></div>
          </td>
        </tr>
        
※長いので省略
<tr>～</tr>の中をコピーして「id="bgcNoを19」まで
「id="chuo20"」まで増やしてくださいね！もしくはデモのソースを参考に！

        <tr>
          <td id="bgcNo20">
            <input name="CBox" type="checkbox" id="chuo21" />
            <div><label for="chuo21"></label></div>
          </td>
          <td id="bgcNo21">
            <input name="CBox" type="checkbox" id="chuo22" />
            <div><label for="chuo22"></label></div>
          </td>
          <td id="bgcNo22">
            <input name="CBox" type="checkbox" id="chuo23" />
            <div><label for="chuo23"></label></div>
          </td>
          <td id="bgcNo23">
            <input name="CBox" type="checkbox" id="chuo24" />
            <div><label for="chuo24"></label></div>
          </td>
          <td id="bgcNo24">
            <input name="CBox" type="checkbox" id="chuo25" />
            <div><label for="chuo25"></label></div>
          </td>
        </tr>
      </table>
      <div id="getNam">
        <input id="getNamBtn" type="button" value="番号を変える" />
      </div>
      <p class="button">
        <input id="ChkboxDisabled" type="checkbox" onchange="chkDisabled()" />
        <span>カードを決定する</span>
        <label for="ChkboxDisabled"></label>
      </p>
    </div>
  </body>

▼css

body {
    font-family: Arial, sans-serif;
    text-align: center;
  }
  
  label, #getNamBtn {
    cursor: pointer;
  }
  
  /* チェックボックスを見えなくする */
  input[type="checkbox"] {
    display: none;
  }
  
  table {
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    height: auto;
    width: auto;
  }
  
  #container {
    margin: 0 auto;
    width: 332px;
  }
  
  td,
  th {
    padding: 0;
    width: 64px;
    height: 64px;
  }
  
  td {
    background: #f0a262;
    color: #fff;
    border-radius: 24px;
  }
  
  th {
    color: #f0a262;
  }
  
  /* チェックボックスの次の要素に親と同じ箱を作る */
  td > div {
    width: 64px;
    height: 64px;
    line-height: 64px;
  }
  
  /* チェックされた時に上記の色を変える */
  table input:checked + div {
    box-sizing: border-box;
    background: #fff;
    border: solid #f0a262;
    color: #f0a262;
    border-radius: 24px;
  }
  
  label {
    display: block;
    vertical-align: middle;
  }
  
  #getNam, #getNam + label {
    margin-top: 24px;
  }
  
  
  .button {
    position: relative;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    width: 9rem;
    height: 1rem;
    font-size: 16px;
    padding: 0.3em 1em;
    text-decoration: none;
    color: #67c5ff;
    border: solid 2px #67c5ff;
    border-radius: 3px;
  }
  .button:hover {
    background: #67c5ff;
    color: white;
  }
  
  .button > label {
    display: block;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
  }

▼JavaScript

var $ = function (id) {
    return document.getElementById(id);
  };
  
  var makecol = function (base) {
    var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
    var list = [];
    for (var i = 1; i <= 5; i++) {
      // 1～16の乱数を生成
      var a = parseInt(Math.random() * arr.length);
      // listの配列に乱数に引数を足したものを足していく
      list.push(arr[a] + base);
      // 次の乱数がかぶらないように出た数字を配列から削除
      arr.splice(a, 1);
    }
    return list;
  };
  
  var makerow = function () {
    //引数+15までの5つの数字の配列を作る
    var col_b = makecol(1);
    var col_i = makecol(17);
    var col_n = makecol(33);
    var col_g = makecol(49);
    var col_o = makecol(65);
    var list = new Array(25);
    // できた縦列ををlist(25)の中にはめていく
    for (var i = 0; i < 5; i++) {
      list[i * 5 + 0] = col_b[i];
      list[i * 5 + 1] = col_i[i];
      list[i * 5 + 2] = col_n[i];
      list[i * 5 + 3] = col_g[i];
      list[i * 5 + 4] = col_o[i];
    }
    list[12] = "FREE"; /* free */
    return list;
  };
  
  var makeCard = function () {
    var row = makerow();
    // id=bgcNo(+数字)のところに生成した数字を順番に入れていく
    for (var i = 0; i < row.length; i++) {
      $("bgcNo" + i).querySelector("label").innerHTML = row[i];
    }
  };
  
  // ページを表示した時点でカードを一度生成してボタンにもイベントを仕込む
  window.onload = function () {
    makeCard();
    $("getNam").onclick = function () {
      makeCard();
      for (i = 0; i < document.all.CBox.length; i++) {
        document.all.CBox[i].checked = false;
      }
    };
  };
  
  // 番号変更ボタンをロックする
  function chkDisabled() {
    if ($("ChkboxDisabled").checked == true) {
      $("getNamBtn").disabled = true;
      $("ChkboxDisabled").nextElementSibling.innerText = "カードを変更する";
    } else {
      $("getNamBtn").disabled = false;
      $("ChkboxDisabled").nextElementSibling.innerText = "カードを決定する";
    }
  }

今回の記事やデモページ作成にあたり
AOK's JavaScript Sampleのページを参考にさせていただきました。
配列に数字を仕込んでいくあたりに脱帽しました・・・！

デモページは、こちら

JavaScript