CSS javascript

JavaScriptでビンゴゲーム数字出しアプリの作成方法　その2

概要

ビンゴゲームは老若男女問わず楽しめる人気のゲームです。この記事では、HTML5とJavaScriptを使用してビンゴゲームの数字出しアプリを作成する方法を紹介します。出た数字は黄色い背景に変わり、最新の数字は赤で表示されます。簡単なステップで初心者でも作成できるように解説します。

本記事は、下記記事のプログラムの改良版になります。

なお、本プログラムは下記で試すことが出来ます。

https://chemtoollab.com/program/bingo/v2

使用例

このビンゴゲーム数字出しアプリは、家庭や職場でのビンゴ大会やイベントで大いに活躍します。簡単なインターフェースで操作も直感的に行え、どなたでもすぐに利用できます。イベントの盛り上げ役として最適です。

必要なプログラム

このアプリを作成するためには、以下の3つのファイルが必要です：

  1. HTMLファイル (index.html)
  2. CSSファイル (styles.css)
  3. JavaScriptファイル (script.js)

インストール方法

  1. 上記の3つのファイルを以下のリンクからダウンロードしてください：
    • index.html
    • styles.css
    • script.js
  2. ダウンロードしたファイルを同じディレクトリに保存します。

使用手順

  1. 上記のリンクから必要なファイルをダウンロードし、同じディレクトリに保存します。
  2. index.htmlファイルをブラウザで開きます。
  3. ページが表示されたら、「数字を出す」ボタンをクリックします。
  4. クリックすると2秒間、数字がルーレットのように入れ替わり、その後ランダムに数字が決定されます。
  5. 出た数字は画面中央に表示され、テーブルの該当するマスが黄色に変わります。
  6. 最新の出た数字は赤色で表示され、以前の数字は黒のままです。
  7. 「リセット」ボタンをクリックすると、すべての数字がリセットされます。

注意点

  • 一度選ばれた数字は再度選ばれることはありません。
  • 75個の数字すべてが選ばれると、「すべての数字が出ました！」というメッセージが表示されます。
  • ブラウザのlocalStorageを使用しているため、ブラウザのキャッシュをクリアすると選ばれた数字の記録も消えます。

プログラム詳細

HTMLファイル (index.html)

HTMLファイルは、アプリの構造を定義します。基本的なHTMLの知識があれば、内容を理解するのは簡単です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ビンゴゲーム数字出しアプリ</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>ビンゴゲーム数字出しアプリ</h1>
    <button onclick="startDraw()">数字を出す</button>
    <div id="numberDisplay"></div>
    <h2>出た数字の記録</h2>
    <table id="historyTable"></table>
    <button onclick="resetNumbers()">リセット</button>

    <script src="script.js"></script>
</body>
</html>

CSSファイル (styles.css)

CSSファイルは、アプリの見た目をスタイルします。フォントやレイアウトの設定が含まれています。出た数字は黄色い背景に変わり、最新の数字は赤色で表示されます。

body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin-top: 50px;
}
#numberDisplay {
    font-size: 2em;
    margin: 20px;
}
#historyTable {
    margin: 0 auto;
    border-collapse: collapse;
}
#historyTable td {
    width: 40px;
    height: 40px;
    text-align: center;
    font-size: 1.2em;
    color: black;
    font-weight: bold;
    border: 1px solid #ccc;
}
.yellow {
    background-color: yellow;
}
.red {
    color: red !important;
}

JavaScriptファイル (script.js)

JavaScriptファイルは、アプリの動作を制御します。ランダムな数字の選択や、選ばれた数字の表示・記録を行います。出た数字を記録し、最新の数字を赤く表示するロジックが含まれています。

let numbers = Array.from({length: 75}, (_, i) => i + 1);
let drawnNumbers = JSON.parse(localStorage.getItem('drawnNumbers')) || [];
let lastDrawnNumber = drawnNumbers.length > 0 ? drawnNumbers[drawnNumbers.length - 1] : null;

function startDraw() {
    if (numbers.length === 0) {
        alert('すべての数字が出ました！');
        return;
    }

    let rouletteInterval = setInterval(() => {
        const randomIndex = Math.floor(Math.random() * numbers.length);
        const randomNumber = numbers[randomIndex];
        document.getElementById('numberDisplay').textContent = randomNumber;
    }, 50);

    setTimeout(() => {
        clearInterval(rouletteInterval);
        drawNumber();
    }, 2000);
}

function drawNumber() {
    const randomIndex = Math.floor(Math.random() * numbers.length);
    const drawnNumber = numbers.splice(randomIndex, 1)[0];
    drawnNumbers.push(drawnNumber);

    localStorage.setItem('drawnNumbers', JSON.stringify(drawnNumbers));
    lastDrawnNumber = drawnNumber;

    document.getElementById('numberDisplay').textContent = drawnNumber;
    updateHistory();
}

function updateHistory() {
    const historyTable = document.getElementById('historyTable');
    historyTable.innerHTML = '';

    for (let row = 0; row < 15; row++) {
        let tr = document.createElement('tr');
        for (let col = 0; col < 5; col++) {
            let td = document.createElement('td');
            let number = row + 1 + col * 15;
            td.textContent = number;
            if (drawnNumbers.includes(number)) {
                td.classList.add('yellow');
            }
            if (number === lastDrawnNumber) {
                td.classList.add('red');
            }
            tr.appendChild(td);
        }
        historyTable.appendChild(tr);
    }
}

function resetNumbers() {
    drawnNumbers = [];
    numbers = Array.from({length: 75}, (_, i) => i + 1);
    lastDrawnNumber = null;
    localStorage.removeItem('drawnNumbers');
    document.getElementById('numberDisplay').textContent = '';
    updateHistory();
}

// ページ読み込み時に履歴を更新
document.addEventListener('DOMContentLoaded', (event) => {
    updateHistory();
});

あるいは、下記からコードをダウンロードしてください。

アイコン

bingoくんv2

1 ファイル 1.80 KB
ダウンロード

まとめ

このビンゴゲーム数字出しアプリは、シンプルな構造と簡単な操作で多くの場面で活用できます。HTML5とJavaScriptの基本を学びながら、楽しいアプリを作成してみてください。家庭やイベントでのビンゴゲームをさらに楽しめるツールとして、ぜひ利用してみてください。今すぐダウンロードして、あなたのイベントを盛り上げましょう！

-CSS, javascript