Bingo Game

概要

Vue.js（CDN版）を使用して開発したビンゴゲームです。

ランダムに番号を引きながらビンゴカードの状態を管理し、ビンゴ成立までゲームを楽しめます。

ゲームの機能

番号を引く

「番号を引く」ボタンをクリックすると、手動でビンゴカードの番号を引くことができます。

画面には以下の情報が表示されます。

• 直近に引いた番号
• 引いた数
• ビンゴ数
• ゲームの状態
• 出た番号一覧

また、ビンゴカード内に直近の番号が存在する場合は、そのマスの色が変化します。
ビンゴが成立すると、状態が 「BINGO!」 に変わり、ゲーム終了となります。

自動で引く

「自動で引く」ボタンをクリックすると、ボタンを押し続けなくても一定間隔で自動的に番号が引かれます。

リセット

「リセット」ボタンをクリックすると、ゲームの状態が初期化され、新しくゲームを始めることができます。

作ってみようと思ったきっかけ

2024年5月の転職面接のプログラミングテストで落とされてしまい、その時の課題がビンゴゲームでした。
当時は、プログラミングのスキル不足を自覚しました。

2024年11月に仕事でPythonを扱うようになり、自身のブログでビンゴゲームを題材にすることにしました。
Pythonで作る「ビンゴゲーム」

2025年7月31日には工場搬送システムの機能追加の仕事でPythonを扱っており、再びビンゴゲームの記事を書きました。
再び、Pythonで作るビンゴゲーム

当時の職場で、Vue.jsを使っている人がいたので、自分も学習しておこうと思いました。
ChatGPTの力も借りながら、こちらのVue.js製のビンゴゲームを作成しました。
Vue.js ビンゴ

作成時期

2025年8月26日

今後の予定

Vue.jsの技術力向上のため、Vue.jsがどのような使われ方をしているのかについての技術ブログを書きます。

公開URLのログイン情報

• ユーザー名：khiro
• パスワード：khiro