BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. コーディング(html/css/JavaScript)
  5. jQueryで作るビンゴマシン
by 稲垣 稲垣

jQueryで作るビンゴマシン

jQueryで作るビンゴマシン

こんにちは稲垣です。

今回は結婚式の二次会などでよくやるビンゴゲームをjavascriptで作成してみました!

デモ

今回作ってみたものです。一度引いた番号は下の方に表示されるようにしています。

html、CSS

html

#numには引いた番号を大きく表示させます。

あとは番号を引くためのbuttonと、一度引いた番号を並べて表示するul#num2を用意しておきます。

CSS

動きの実装

それでは動きの部分になります。

まずは必要な変数と配列を準備します。

ここで作った配列にビンゴで出てくる数字の1~75を入れておきます。

さらに配列の中身をランダムに並び替える処理をかけます。

これで配列の最初から順番に値を取り出していくだけでビンゴゲームの完成となります!

次に配列から値を取り出して#numに表示させる関数と、STARTボタン押下時に数字をシャッフルさせる関数を作成します。

あとはスタートボタン押下時の処理を記述します!

スタートとストップの処理は同じボタンに兼ねさせるので、押した時にそれぞれの機能と表示が切り替えるようにしました。

まとめ

以上で完成です!最後にコードをまとめて載せます。

こんな感じでお手軽に作れます。

自作すればスマホでアクセスしたりプロジェクターで投影したりと、ビンゴマシンがなくても気軽にイベントで使えますね!

マグネッツとは?
福岡でWEB制作や中小企業様の集客支援などを行っている会社です。
新着情報配信中!
商用利用OK&無料!総合素材サイト|ソザイング
ページの先頭に戻る