CSS javascript

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

概要

ビンゴゲームは多くの人々に楽しまれている定番ゲームです。この記事では、HTML5とJavaScriptを使用して、75個の数字からランダムに数字を1つずつ選び出し、ブラウザに表示・記録するビンゴゲームの数字出しアプリを作成する方法を詳しく解説します。選ばれた数字はブラウザに記録され、プログラムを閉じても残ります。また、数字のリセットボタンも追加されており、簡単にリセットできます。初心者でも簡単に作れるように、ステップバイステップで説明しています。

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

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

使用例

このビンゴゲーム数字出しアプリは、オンラインビンゴゲームやイベントでの抽選に最適です。シンプルなインターフェースで操作も簡単なので、パーティーや学校のイベントなどでも大活躍します。例えば、家庭でのパーティーや会社のイベントでビンゴゲームを楽しむ際に、紙とペンを使わずに簡単に数字を管理できます。

必要なプログラム

このアプリを作成するためには、以下の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. クリックするたびに、1から75までの数字がランダムに選ばれ、選ばれた数字が画面に表示され、過去に選ばれた数字の記録も更新されます。
  5. 出た数字の記録の下にある「リセット」ボタンをクリックすると、選ばれた数字と現在表示されている数字がすべてリセットされます。

注意点

  • 一度選ばれた数字は再度選ばれることはありません。
  • 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="drawNumber()">数字を出す</button>
    <div id="numberDisplay"></div>
    <h2>出た数字の記録</h2>
    <ul id="history"></ul>
    <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;
}
#history {
    margin-top: 20px;
}
#history li {
    display: inline-block;
    margin: 5px;
    font-size: 1.2em;
}

JavaScriptファイル (script.js)

JavaScriptファイルは、アプリの動作を制御します。ランダムな数字の選択や、選ばれた数字の表示・記録を行います。

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

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

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

    localStorage.setItem('drawnNumbers', JSON.stringify(drawnNumbers));

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

function updateHistory() {
    const historyElement = document.getElementById('history');
    historyElement.innerHTML = '';
    drawnNumbers.forEach(number => {
        const li = document.createElement('li');
        li.textContent = number;
        historyElement.appendChild(li);
    });
}

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

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

また、下記からプログラムをダウンロードできます。

アイコン

bingoくんv1

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

まとめ

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

-CSS, javascript