社内でビンゴ大会があり、ビンゴの仕組みをJavaScriptで作成したので、その共有です。

必要な機能

ビンゴのシステムを作るにあたり、必要な機能を考えます。

数字がランダムに表示される
同じ数字は二度でない
出た数字が確認できる

こんなところでしょうか。
上記、3つの機能を備えたプログラムを作っていきます。

書いてみる

上記の３つの機能を網羅したプログラムを書いてみました。

jQuery

let gameState = true; // ゲームの状態
let preArray = []; // 抽選箱
let postArray = []; // 過去ログ

const itemLength = 10; // ビンゴの最大数
for (let i = 0; i < itemLength; i++) {
  preArray.push(i); // 抽選箱の中に整数を格納
}

for (let i = 0; i < preArray.length; i++) {
  let rand = Math.floor(Math.random()*(i+1)); // 乱数を作成
  [preArray[i], preArray[rand]] = [preArray[rand], preArray[i]]; // 整数をランダムに並べ替え
}

$('button').on('click', function(){
  if (0 < preArray.length) {
    let current = preArray.shift(); // 抽選箱の先頭の要素を取得し、削除
    postArray.push(current); // 過去ログに格納
    console.log(current);
    console.log(postArray);
  } else {
    if (gameState) {
      gameState = false;
      console.log('終了');
    } else { // gameState が false ならなにもしない
      return false;
    }
  }
});

解説

上から解説していきます。

jQuery

let gameState = true; // ゲームの状態
let preArray = []; // 抽選箱
let postArray = []; // 過去ログ

gameStateはBINGOが終わったときにfalseにして、if文の分岐条件にします。
まだ空っぽですが、抽選箱に見立てたpreArrayに数字を入れておき、取り出してpostArrayに入れます。
実際のビンゴと同じシステムです。

jQuery

const itemLength = 10; // ビンゴの最大数
for (let i = 0; i < itemLength; i++) {
  preArray.push(i); // 抽選箱の中に整数を格納
}

for (let i = 0; i < preArray.length; i++) {
  let rand = Math.floor(Math.random()*(i+1)); // 乱数を作成
  [preArray[i], preArray[rand]] = [preArray[rand], preArray[i]]; // 整数をランダムに並べ替え
}

出したい数字の最大数を決め、その数だけfor文を回し、抽選箱ことpreArrayに整数を格納します。
preArrayをもう一度for文で回し、中の数字をランダムに並べ替えます。
並べ替えは、以下を参考にさせていただきました。

参照：JavaScript 簡単に配列をシャッフルする

フィッシャー–イェーツのシャッフルです。

jQuery

$('button').on('click', function(){
  if (0 < preArray.length) {
    let current = preArray.shift(); // 抽選箱の先頭の要素を取得し、削除
    postArray.push(current); // 過去ログに格納
    console.log(current);
    console.log(postArray);
  } else {
    if (gameState) {
      gameState = false;
      console.log('終了');
    } else { // gameState が false ならなにもしない
      return false;
    }
  }
});

button要素をクリックしたら、抽選箱preArrayの先頭の要素をcurrentに代入し、抽選箱preArrayから削除します。
そして、currentを過去ログ用配列のpostArrayに格納します。
抽選箱preArrayの中身がなくなったら、if文で終了を通知し、その後なにも起こらないようにします。

確認

コンソールを開き、「ぼたん」をクリックしてご確認ください。

See the Pen BINGO by Otsuka Yuhi (@boltkeep) on CodePen.