【javascript】どこでもBINGO大会！

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

お正月やお盆に親戚や友人、その家族たちとの集まりがありますよね？
食事や会話を楽しんだ後少し子どもたちが退屈そうに・・・。
そんな時にちょっとしたプレゼントを用意して、簡単なビンゴ大会なんてどうでしょう？
デモの出てくる数字は１～８０の間ですのでお好みあわせてカスタマイズすてみてくださいね！

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

▼html

<body>
    <span id="sai">?</span>
    <form>
        <div id="button">
        <input type="button" value=" BINGO！" onclick="bingoNo()">
        </div>
    </form>
    <div id="promptNo"></div>
</body>

▼css ボタンや文字の大きさや色はお好みで！

body {
  font-family: Arial, sans-serif;
  text-align: center;
  font-size: 16px;
}

#sai {
  font-size: 200px;
}

#promptNo {
  font-size: 3rem;
}
#button {
  margin: 0 auto;
  margin-bottom: 2em;
}

input {
  font-size: 24px;
  padding: 0.2em;
  text-decoration: none;
  border-radius: 4px;
  color: #ffffff;
  background-image: linear-gradient(#6795fd 0%, #67ceff 100%);
  box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.29);
  border-bottom: solid 0.05em #5e7fca;
  border-radius: 0.2em;
}
input:active{
  transform: translateY(3px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
  border-radius: 0.2em;
}

▼JavaScript

var promptNo  = "";
// 重複チェック用配列
var randoms = [];
// 最小値と最大値
var min = 1, max = 80;

function bingoNo(){

    // 重複チェックしながら乱数作成
    do {
    var hitNo = intRandom(min, max);

        if(randoms.length >= max) {
        document.getElementById("sai").innerHTML = "End!";
        return;
        }

    } while(randoms.includes(hitNo))

        randoms.push(hitNo);
        var displayNo = hitNo;
        if (promptNo === "") {
        promptNo = hitNo;

    } else {

        promptNo = promptNo + " | " + hitNo;

    }

    // min以上max以下の整数値の乱数を返す
    function intRandom(min, max){
        return Math.floor( Math.random() * (max - min + 1)) + min;
    }

    // htmlに書き込み
    document.getElementById("sai").innerHTML = displayNo;
    document.getElementById("promptNo").innerHTML = promptNo;

}

今回の記事やデモページ作成にあたり
JavaScriptで重複なしの乱数を作る一番簡単な方法のページを参考にさせていただきました。
とても勉強になりました！

デモページは、こちら

JavaScript