JS.5 ビンゴマシーン

2019-06-09(Sun) | tags: game

動機

音声の取り扱い方、表示/非表示のやり方を試すために、ビンゴマシーンを作成しました。

作成したきっかけは、知り合いのエンジニアの結婚式の際に、新郎の方が即席でプログラムを書いてビンゴを行なったと聞き、そういった要望をすぐにかなえられたらカッコいいなと思ったからです。（結婚式会場にパソコン持っていくのは流石優秀なエンジニアだなと思いましたが…笑）

なお、調べれば色々な方がビンゴマシーンを作成しているので、ビンゴマシーン javascriptとかで検索して見てください。

作ったもの

まずは、最大値を決めてビンゴマシーンを作成してください！普通の市販のビンゴは最大値が75になっていると思います。

コード

html

<div class="wrapper">
  <div id="bingo-info" style="display: block;">
    <input id="max-num" type="number" min="1" max="99" value="75"/>
    <button type="button" class="generate" onclick="generateBINGO()">生成</button>
  </div>
  <div id="bingo-machine" style="display: none;">
    <div id="result" class="result"></div>
    <ul id="number" class="number"></ul>
    <div class="wrapper-button">
      <button id="button" class="button">START</button>
    </div>

    <audio id="sound-play" preload="auto">
      <source src="https://raw.githubusercontent.com/miiitaka/game-bingo/master/start.mp3" type="audio/mp3">
    </audio>
    <audio id="sound-pause" preload="auto">
      <source src="https://raw.githubusercontent.com/miiitaka/game-bingo/master/pause.mp3" type="audio/mp3">
    </audio>

  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

javascript

var
  max,
  bingo = [],
  $number = $("#number"),
  $result = $("#result"),
  $sound_play = $("#sound-play"),
  $sound_pause = $("#sound-pause");

// ビンゴマシーンを作成する。
function generateBINGO(){
  max = document.querySelector('#max-num').value;
  for(var i = 1; i <= max; i++) {
    bingo.push(i);
    $number.append($("<li>").text(("0" + i).slice(-2)));
  }
  document.querySelector('#bingo-info').style.display = "none";
  document.querySelector('#bingo-machine').style.display = "block";
  window.alert('最大値'+max+'でビンゴマシーンが生成されました！\nSTARTボタンを押してビンゴを始めてみてください！！\n※音が出るので注意してください。')
};

$(function(){
  var
    status = true,
    roulette,
    random,
    number,
    result;

  $("#button").on("click", function(){
    // ルーレットを回す
    if(status) {
      status = false;
      $(this).text("STOP");
      $sound_play.trigger("play");
      $sound_pause.trigger("pause");
      $sound_pause[0].currentTime = 0;

      roulette = setInterval(function(){
        random = Math.floor(Math.random() * bingo.length);
        number = bingo[random];
        $result.text(number);
      }, 10); // 10ms毎にイベント(数字を回す)を起動。
    // ルーレットを止める
    } else {
      status = true;
      $(this).text("START");
      $sound_pause.trigger("play");
      $sound_play.trigger("pause");
      $sound_play[0].currentTime = 0;

      clearInterval(roulette); // 起動していたイベントを終了

      result = bingo[random];
      bingo.splice(random, 1); // 配列から削除

      $result.text(result);
      $number.find("li").eq(parseInt(result, 10) - 1).addClass("hit");
    }
  });
});

css

body {
  color:#000000;
  font-family: arial, sans-serif;
}

.wrapper {
  text-align: center;
  margin: 0 auto;
}

input {
  padding: 10px;
  font-size: 1.2em;
}

.generate {
  padding: 10px;
  font-size: 1.2em;
  border-radius: 3px;
  background-color: #80160e;
  color: #ffffff;
}

.result {
  align-items: center;
  border: solid 1px #000000;
  display: flex;
  font-size: 130px;
  font-weight: bold;
  justify-content: center;
  height: 200px;
  margin: 0 auto 10px;
  text-align: center;
  width: 200px;
}

.number {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0 auto;
  list-style: none;
  padding: 0;
  width: 500px;
}

@media (max-width: 767px) {
  .number {
    width: 100%;
  }
}

.number li {
  align-items: center;
  border: solid 1px #000000;
  display: flex;
  justify-content: center;
  height: 40px;
  margin: 4px;
  width: 40px;
}

.number li.hit {
  background: #80160e;
  color: #fff;
}

.wrapper-button {
  padding: 20px 0 50px;
  text-align: center;
}

.button {
  background: #80160e;
  border: dashed 1px #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 0 5px #80160e;
  color: #ffffff;
  display: inline-block;
  font-size: 20px;
  text-decoration: none;
  height: 100px;
  line-height: 100px;
  overflow: hidden;
  text-align: center;
  transition: .4s;
  vertical-align: middle;
  width: 100px;
}

.button:hover {
  background: #f0d0d0;
  box-shadow: 0 0 0 5px #b87069;
  cursor: pointer;
}

footer {
  text-align: center;
}
other contents
social