Bubble Pop Web Game

ようこそ！シンプルで奥が深い、バブルポップゲームの世界へ！

ゲーム概要

画面に浮かび上がる様々な種類の泡をクリック・タップして割り、スコアを稼ぐアクションゲームです。時間が経つと泡は成長し、放置すると破裂してダメージを受けます。特殊な効果を持つ泡もあり、戦略的なプレイが求められます。制限時間内にできるだけ高いスコアを目指しましょう！

スクリーンショット

メインメニュー

ゲームプレイ

ステージ選択

アイテムショップ

注: スクリーンショットは実装完了後に追加予定です

主な特徴

• 直感的な操作: マウスクリックやタッチで泡を割る、シンプルで分かりやすい操作
• 多彩な泡の種類: 18種類以上の個性豊かな泡（通常、石、ダイヤモンド、レインボー、エレクトリック、ボス泡など）
• 戦略的なゲームプレイ: 時間管理とHP管理が重要な、奥深いゲーム性
• 豊富なステージ: チュートリアルから全部入りアワアワまで、10種類の多様なステージ
• 永続的な進歩システム: APとTAPを貯めてアイテムを購入し、ゲームを有利に進行
• 包括的なアクセシビリティ: WCAG 2.1 AA準拠、スクリーンリーダー対応、キーボード操作完全対応
• 完全多言語対応: 5言語対応（日本語、英語、中国語簡体字・繁体字、韓国語）、文化的適応機能付き
• 高度なパフォーマンス最適化: 60FPS維持、メモリ最適化、モバイル対応
• 包括的統計・実績システム: 詳細なプレイ統計、30+種類の実績、進捗追跡機能

遊び方

1. ゲームを開始: index.html をブラウザで開くと、メインメニューが表示されます。
2. ユーザー登録: 初回起動時にユーザー名を登録します。
3. ステージを選択: 「ステージセレクト」画面から、挑戦したいステージを選びます。
4. 泡を割る:
   • 画面に現れる泡をクリック・タップして割ります。
   • 硬い泡は複数回クリックが必要です。
   • ドラッグで泡を移動させることもできます。
5. 特殊泡の効果:
   • ピンクの泡：HP回復
   • 毒の泡：ダメージを受ける
   • 虹色の泡：ボーナスタイム発動
   • 時計の泡：時間停止効果
6. ゲーム終了: HPが0になるか制限時間が終了するとゲームオーバーです。
7. 進歩システム: 獲得したスコアがAPに変換され、アイテムショップで強化アイテムを購入できます。

キーボード操作

マウスやタッチ操作に加えて、キーボードでも快適に操作できます：

• 基本操作: ↑↓でメニュー選択、Enterで決定、Escapeで戻る
• ゲーム中: Spaceで一時停止、Mでミュート、Fでフルスクリーン
• アクセシビリティ: Ctrl+Alt+Hでハイコントラスト切り替えなど

詳細は キーボードショートカット一覧 をご覧ください。

動作環境

• 推奨ブラウザ:

  • Google Chrome (最新版)
  • Mozilla Firefox (最新版)
  • Safari (最新版)
  • Microsoft Edge (最新版)

• 対応言語:

  • 🇯🇵 日本語（完全対応）
  • 🇺🇸 English（完全対応）
  • 🇨🇳 中文简体（実装済み・翻訳進行中）
  • 🇹🇼 中文繁體（実装済み・翻訳進行中）
  • 🇰🇷 한국어（実装済み・翻訳進行中）

• アクセシビリティ:

  • WCAG 2.1 AA準拠
  • スクリーンリーダー完全対応
  • キーボード操作対応
  • 高コントラスト・大きな文字対応
  • 色覚異常対応

開発者向け情報

プロジェクト構造

├── src/                           # ソースコード
│   ├── core/                     # コアゲームエンジン
│   │   ├── visual/               # 視覚管理コンポーネント（Phase G分割）
│   │   │   ├── focus/           # フォーカス管理（Phase G.3）
│   │   │   └── feedback/        # フィードバック管理（Phase G.4）
│   │   ├── VisualFocusManager.js        # メインコントローラー
│   │   └── VisualFeedbackManager.js     # メインコントローラー
│   ├── audio/                    # 音響システム
│   │   └── accessibility/        # アクセシビリティ（Phase G.2分割）
│   │       ├── AudioAccessibilitySupport.js  # メインコントローラー
│   │       ├── AudioDescriptionManager.js
│   │       ├── AudioCueManager.js
│   │       ├── AudioFeedbackManager.js
│   │       ├── AudioSettingsManager.js
│   │       ├── AudioEventManager.js
│   │       └── AudioLegacyAdapter.js
│   ├── scenes/                   # ゲームシーン
│   ├── bubbles/                  # 泡の種類
│   ├── effects/                  # 視覚効果・パーティクル
│   ├── ui/                       # UIコンポーネント
│   ├── utils/                    # ユーティリティ関数
│   ├── config/                   # 設定ファイル
│   ├── locales/                  # 多言語リソース
│   ├── accessibility/            # アクセシビリティ機能
│   └── debug/                    # デバッグ・テストツール
├── tools/                        # 開発ツール
│   └── balance/                  # バランス調整ツール（Phase G.1分割）
│       ├── balance-adjuster.js   # メインツール
│       ├── BalanceDataLoader.js
│       ├── BalanceCalculator.js
│       ├── BalanceValidator.js
│       └── BalanceExporter.js
├── docs/                         # ドキュメント
├── tests/                        # テストファイル
│   └── integration/              # 統合テスト
│       ├── phase-g-file-structure.test.js
│       ├── phase-g-end-to-end.test.js
│       └── phase-g-functionality.test.js
└── dist/                         # ビルドファイル

Phase G分割後の主要変更点:

• Main Controller Pattern適用: 大容量ファイルを軽量コントローラー + サブコンポーネントに分割
• MCPツール互換性: 全ファイルが2,500語以下を達成
• 後方互換性維持: 既存APIは完全保持
• モジュラー設計強化: 単一責任の原則に基づく構造

開発環境の構築

推奨: 開発サーバーの使用

最適な開発体験のため、開発サーバーの使用を推奨します：

# Node.js開発サーバー（推奨）
npm run dev

# または代替の簡易HTTPサーバー
python -m http.server 8000
python3 -m http.server 8000
npx serve .
npx http-server

ローカルファイル実行について

⚠️ 重要: ローカルファイル（file://プロトコル）での実行には制限があります。

制限事項:

• ES6モジュールが正常に読み込まれない場合があります
• 一部のセキュリティ機能が制限されます
• ServiceWorker機能は利用できません
• パフォーマンスが最適ではない可能性があります

ローカルファイル実行時の対応:

• ゲーム起動時に自動的にローカル実行モードが有効になります
• 開発サーバー使用を推奨する通知が表示されます
• 不足しているファビコンは自動生成されます
• CORS制限によるエラーは自動的に処理されます

トラブルシューティング:

• モジュール読み込みエラーが発生した場合は開発サーバーを使用してください
• コンソールにCORSエラーが表示される場合は正常動作です（自動処理されます）
• ファビコン404エラーは自動的に解決されます

利用可能なスクリプト

• npm run dev - 開発サーバー起動（推奨）
• npm run build - 本番用ビルド
• npm run preview - 本番ビルドのプレビュー
• npm test - 単体テスト実行
• npm run test:e2e - E2Eテスト実行
• npm run lint - リンター実行

ドキュメント・ガイド

• キーボードショートカット一覧 - 全てのキーボード操作の詳細ガイド
• Playwright テストガイド - ブラウザ自動化テストの実行手順
• デバッグモード: ?debug=true でコンソールログやデバッグ情報を表示
• テスト用URL: ?username=TestUser&skipUsernameInput=true でユーザー名入力をスキップ

ファビコン生成ツール

不足しているファビコンファイルを生成するツールが利用できます：

# ファビコン生成（SVG + PNG）
node tools/generate-favicons.js

# 既存ファビコンの検証
node tools/generate-favicons.js validate

# favicon.ico自動生成
node tools/generate-favicons.js ico

# 包括的なファビコンデバッグ
node tools/generate-favicons.js debug

# 全工程を一括実行
node tools/generate-favicons.js all

ライセンス

このプロジェクトはMITライセンスの下で公開されています。詳細はLICENSEファイルをご覧ください。

多言語対応について

このゲームは包括的な多言語対応システムを搭載しています：

対応言語

• 🇯🇵 日本語版 README
• 🇺🇸 English README
• 🇨🇳 中文简体 README
• 🇹🇼 中文繁體 README
• 🇰🇷 한국어 README

多言語機能

• 動的言語切り替え: ゲーム中に言語を即座に変更可能
• 文化的適応: 各言語・地域に応じた数値・日付フォーマット
• 地域化対応: 通貨表示、時刻表示の地域別最適化
• アクセシビリティ翻訳: スクリーンリーダー対応の専用翻訳
• RTL言語対応準備: 将来のアラビア語・ヘブライ語対応に向けた基盤

翻訳品質管理

• 自動品質チェック機能
• 翻訳一貫性検証
• 文化的適切性チェック
• 進捗追跡システム

---

このゲームを楽しんでいただければ幸いです！