社内でビンゴ大会があり、ビンゴの仕組みを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文で回し、中の数字をランダムに並べ替えます。
並べ替えは、以下を参考にさせていただきました。
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.