JavaScriptでビンゴゲームを作る方法を現役エンジニアが解説【初心者向け】

JavaScriptでビンゴゲームを作る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

 

ビンゴゲームの仕様

ゲームの参加者はそれぞれビンゴのカードを持ちます。ビンゴのカードは、1-75までの間の数をランダムに5×5のマスに割り当てたものです。そして、ランダムに1-75の数が発表されていくので、ビンゴカードに一致する数があればチェックをしていきます。

チェックをしたマスが縦、横、斜めのいずれかに1列そろえば勝ち（ビンゴ）となります。

ビンゴゲームを作る方法

ゲームに必要な下記の2つを作ります。

1、ビンゴカードの画面

正方形の5×5のマスにランダムな1～75の数を表示し、クリックでチェックができるようにします。中心のマスはfreeと書いたはじめからチェックが入ったマスにします。

2、番号を発表する画面

スタート、ストップボタンでランダムな1～75の数から1つを表示します。また、発表された数字はすべて履歴としてまとめて表示します。

[PR] フロントエンドで副業する学習方法を動画で公開中

実際に書いてみよう

ビンゴカード画面と番号発表画面の2つを作ります。共通する処理もありますが、処理のわかりやすさを優先して今回は別々に独立した作りにします。

ビンゴカードの画面

下記の画像のようにマスを赤、チェックすると灰色になるようにしました。画面のサイズを変えても正方形を保つようにしているので、PCやスマホなど様々な画面で表示ができます。

HTML

番号はJavaScriptからランダムに差し込むのでHTMLは枠のみを用意します。JavaScriptからのアクセス用に枠となるdivタグのidにouterを設定しています。

<div class="card">
  BINGOカード<br>
  クリックするとチェックできます。
  <div class="outer"  id="outer">
  </div>
</div>

CSS

outerというクラスが正方形のマスの外枠になります。ここをdisplay:flexとflex-wrap: wrapすることで、数を書いた正方形が並ぶように配置され外枠で折り返して表示されます。

各マスにはsquareというクラスをつけることで正方形になるようにしています。

flex:0 0 20%とすることで、横幅20%（1/5のサイズ）となり5マスずつ並びます。また正方形にするために、squareの疑似要素である::beforeにpading-top:100%として高さが横と同じになるようにしています。

.card{
  background-color: bisque;
  padding: 10px;
  min-width:100px;
}
.outer{
  display:flex;
  flex-wrap: wrap;
}

.square{
  box-sizing: border-box;
  background-color: red;
  border:solid 1px black;
  flex: 0 0 20%;
  position: relative;
}
.outer .gray{
  background-color: gray;
}

.square::before{
  content: '';
  display: block;
  padding-top:100%;
}
.square div{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display:flex;
  justify-content: center;
  align-items: center;
}

 

JavaScript

ビンゴカードに割り当てる数は1-75なので、MAX_NUMBERという定数に75を設定しています。targetNumberという配列は、forループを使って1～75の数を格納しています。

2回目のforループでは、5×5マスの枠を作っています。中心のマスが灰色のfreeという文字になるように、ループの数が全体の真ん中である23回目（COLUMN_LENGTH * ROW_LENGTH /2）をif文で判定しています。

中心以外のマスは、targetNumberの配列からランダムに値を取得してdivタグに格納しています。その際にdivSquare.onclickとすることでdivタグにクリックイベントを設定し、灰色になるクラス名がついたり外れたりするようにしています。

const COLUMN_LENGTH = 5;
const ROW_LENGTH = 5;
const MAX_NUMBER = 75;
let targetNumber = [];
for(let i = 1; i <= MAX_NUMBER; i++){
  targetNumber.push(i);
}

let outer = document.getElementById('outer');

for(let i = 1; i <= COLUMN_LENGTH * ROW_LENGTH; i++){
  let divSquare = document.createElement('div');
  divSquare.classList.add('square');
  
  let div = document.createElement('div');
  if(i === Math.round(COLUMN_LENGTH * ROW_LENGTH /2) ){
    divSquare.classList.add('gray');
    div.textContent = 'free';
  }else{
    divSquare.onclick = () => divSquare.classList.toggle('gray');
    let targetIndex = Math.floor(Math.random() * targetNumber.length) ;     
    div.textContent = targetNumber[targetIndex];
    targetNumber.splice(targetIndex, 1);
  }
  divSquare.appendChild(div)
  outer.appendChild(divSquare);
}

番号発表の画面

HTMLソース

主に3つの部品で構成しています。

1. ルーレットのように番号を表示する場所
2. 番号発表に使うスタート、ストップボタン
3. 発表された数を記録してく場所

<h1>番号を発表する画面</h1>

<div class="main" id='main'></div>
<button id='button'>スタート</button>

<h2>すでに出た数字</h2>
<div id="history"></div>

CSS

こちらは装飾はほぼなしにしています。

発表する文字を中央にしたり、ボタンを丸くしたり色をつけたりお好みで設定してみてください。最低限の設定として、発表する文字の領域（高さ）と大きさのみを設定しています。

.main{
  font-size: 100px;
  height: 150px;
}

JavaScript

番号表示の場所、スタートボタン、発表済み番号表示の場所の3箇所のHTMLを取得してそれぞれに表示処理をしています。発表する番号は、setIntervalを使って100ミリ秒ごとにランダムな数字を表示して抽選をしている雰囲気を出しています。

ボタンのクリックした際の処理で、ボタンの表示を「ストップ」という文言に変更しています。ストップボタンを押した際には、historyArrayという配列に発表した番号を格納し表示しています。

const MAX_NUMBER = 75;
let main = document.getElementById('main');
let button = document.getElementById('button');
let history = document.getElementById('history');
let historyArray = [];
let targetNumber = [];
for(let i = 1; i <= MAX_NUMBER; i++){
  targetNumber.push(i);
}

let timerId;

button.onclick = () => {

  if(targetNumber.length === 0){
    alert('すべての番号の発表が終わりました') ;
    clearInterval(timerId);
    return;
  }
  
  if(button.textContent === 'スタート'){
    button.textContent = 'ストップ';
    timerId = setInterval( () => {
      let targetIndex = Math.floor(Math.random() * targetNumber.length) ;  
      main.textContent = targetNumber[targetIndex];
    }, 100)
  }else{
    button.textContent = 'スタート';
    clearInterval(timerId); 
    let targetIndex = targetNumber.indexOf(Number(main.textContent));   
    targetNumber.splice(targetIndex, 1);
    historyArray.push(main.textContent);
    history.textContent = historyArray;
  }
}

 

まとめ

配列の操作、HTMLの操作、クリックイベントの組み合わせでビンゴの処理を作成しました。普段使っているような簡単な処理でも、1つずつ組み合わせることで様々なアプリが作れますのでお試しください。

筆者プロフィール

横山茂雄（よこやましげお） フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

 

TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。