サイバーモグラ叩き（Whack-a-Mole）について
「サイバーモグラ叩き」は、ゲームセンターやテーマパークでおなじみの伝統的反射神経ゲーム「モグラ叩き」を、ポップで洗練されたWebブラウザゲームとして再構築したアクションパズルです。3×3のグリッドの穴からランダムに顔を出す各種キャラクターを素早くクリック/タップして制限時間内（30秒間）にハイスコアを目指します。
詳しい操作方法とルール
操作方法
- PC（マウス）： 顔を出したモグラをカーソルで素早くクリックします。
- スマホ・タブレット： 画面に出現するキャラクターを直接指でタップします。マルチタッチに対応しており、両手での高速タップが可能です。
キャラクターと得点ルール
- ノーマルモグラ（緑）： ＋10点。基本的なターゲットです。
- 黄金のキングモグラ（金）： ＋30点！出現時間が短いレアターゲットです。
- トラップ爆弾（赤）： －20点減点！叩くと画面が振動し減点されます。
ハイスコアを叩き出すための攻略戦略
- 画面全体を視野に入れる「周辺視野」の活用： 穴1つを凝視するのではなく、画面中央をぼんやり見つめることで、四角の端に現れたモグラの反応速度をコンマ数秒早められます。
- 黄金モグラを最優先で叩く： 通常モグラの3倍の配点があるキングモグラを見逃さないことがランキング上位に入る鍵です。
- 爆弾の「赤色」に過剰反応しない： 焦ると赤色の爆弾を誤タップしてしまいます。「赤が見えたら指を止める」反応抑制を意識しましょう。
AIペアプログラミング開発エピソード＆プロンプト
モグラ叩きゲームでは、CSSのトランスフォームアニメーションとJSタイマーの組み合わせによる出没ランダムアルゴリズムの実装がポイントです。
【使用した開発プロンプトの例】
「HTML5とCSS3、JavaScriptでレスポンシブなモグラ叩きゲームを作成してください。
要件:
1. 3x3のグリッド配置（CSS Grid）を作成し、overflow:hiddenの穴の中にキャラクターを配置すること
2. ランダムな時間間隔 (randomTime) で穴から飛び出る 'up' クラスを付与し、一定時間後に引っ込める非同期タイマー処理
3. 叩いた（click / touchstart）瞬間にスコア加算浮遊エフェクト（CSS Floating Text）を表示させること」
おすすめの他のブラウザゲーム