Edited at

JavaScriptでビンゴをつくる

More than 1 year has passed since last update.

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


必要な機能

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


  • 数字がランダムに表示される

  • 同じ数字は二度でない

  • 出た数字が確認できる

こんなところでしょうか。

上記、3つの機能を備えたプログラムを作っていきます。


書いてみる

上記の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.