【Bingo Game】JavaScriptでビンゴゲームの作り方【サンプル】

こんにちは。前回はJavaScriptを使って、ビンゴカードを作成してみました。

今回はビンゴマシンを作成してみましょう！

HTML
CSS
JavaScript
デモ
まとめ

HTML

まずはHTMLを作成しています。
divのwrapperで全体的に囲み、
・ルーレット div要素
・ルーレットの開始・停止ボタン div要素
・ルーレット停止後、出た数字を一覧で追加する枠 ul要素
で作成しています。

// 全体的な枠
<div class="wrapper">
    // ルーレット
    <div id="result" class="result centering"></div>
    // ルーレット開始、停止のボタン
    <div class="wrapper-button">
        <button id="button" class="button">START</button>
    </div>
    // ルーレットを停止後、出た数字を一覧で表示
    <ul id="number" class="number"></ul>
</div>

CSS

こちらがCSSです。
HTMLで設定した要素に対して、スタイルを設定していきます。
この辺りはコピペで好きなところを調整してもいいと思います！

@charset "utf-8";

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

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

.centering {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

/* ルーレット */
.result {
    border: solid 1px #B78D4A;
    border-radius: 50%;
    font-size: 70px;
    
    margin-bottom: 20px;
    width: 130px;
    height: 130px;
}

/* 出た数字の一覧 */
.number {
    color: #B78D4A;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0 auto;
    list-style: none;
    width: 80%;
    padding: 0;
}

.number li {
    background-color: #B78D4A;
    color: #fff;
    border-radius: 10px;
    height: 40px;
    margin: 4px;
    width: 40px;
}

/* ボタン */
.wrapper-button {
    padding: 20px 0;
}

.button {
    font-size: 30px;
    display: inline-block;
    padding: .8rem 1.6rem;
    border: none;
    border-radius: 25px;
    color: #FFF;
    background-image: linear-gradient(45deg, #B78D4A 0%, #D4BB92 100%);
}

.button:hover {
    background-image: linear-gradient(45deg, #D4BB92 0%, #FDE0A5 100%);
}

JavaScript

Jqueryを使っています。

まずは、ビンゴの数字一覧を作成します。この一覧を使ってルーレットを回します。

次にSTARTとSTOPのクリックイベントでルーレットを回したり、結果を表示させたりします。
詳しくはコメントを記載していますので、確認してください。

$(function () {

    // 1~75まで、bingoの数字一覧を作成
    var max = 75;
    var bingo = [];
    for (var i = 1; i <= max; i++) {
        bingo.push(i);
    }

    var timer;
    var random;
    // START・STOPボタンクリックのイベント
    $("#button").on("click", function () {
        // START
        if ($(this).text() == "START") {
            // ボタンのテキストを"STOP"に変更
            $(this).text("STOP");

            // ルーレットタイマーを設定
            timer = setInterval(function () {
                random = Math.floor(Math.random() * bingo.length);
                $("#result").text(bingo[random]);
            }, 10);
        // STOP
        } else {
            // ボタンのテキストを"START"に変更
            $(this).text("START");

            // ルーレットタイマーを停止
            clearInterval(timer);

            // 停止時の数字を結果に反映
            var result = bingo[random];
            // 一覧から削除（次のルーレットに表示させないため）
            bingo.splice(random, 1);

            // 数字一覧に追加
            $("#number").append($("<li>").text(result));
            $("#number li").addClass("centering");
        }
    });
});