多言語対応のTwitter風レスバゲーム
相手のメンタルHPを削って勝利を目指せ！ただしブロックされたら即ゲームオーバー。
- 🎯 目標: 相手のメンタルHPを0にして勝利！
- ⚔️ 攻撃: 3つの悪口から1つを選んでリプライ
- 🛡️ ブロック: 強すぎる悪口はブロックされるリスクが高い
- 💀 敗北条件: ブロックされる、またはあなたのHPが0になる
- 🔥 反撃システム: 相手も反撃してくる！あなたのHPも減る
- ✨ 豪華な勝利演出 - コンフェッティアニメーション付き
- 🌍 多言語対応 - 日本語・ロシア語対応
- 🎛️ 難易度選択 - Easy/Normalモード
- 📱 完全レスポンシブ - モバイル最適化済み
- ⚡ 反撃システム - NPCが反撃、戦略性UP
| モード | プレイヤーHP | 敵HP | 攻撃力 | ブロック率 | 反撃ダメージ |
|---|---|---|---|---|---|
| Easy | 150 (+50%) | 80 (-20%) | +50% | -70% | -60% |
| Normal | 100 | 100 | 標準 | 標準 | 標準 |
# リポジトリをクローン
git clone https://github.com/yourusername/replybrawl.git
cd replybrawl
# 依存関係をインストール
npm install
# 開発サーバーを起動
npm run devブラウザで http://localhost:3000 にアクセス
- React 18+ - メインフレームワーク
- Tailwind CSS - スタイリング
- Vite - ビルドツール
- Python - 悪口ファイルの変換処理
- JSON - 悪口データの管理
- 🇯🇵 日本語 - メイン言語
- 🇷🇺 ロシア語 - 完全対応
replybrawl/
├── src/
│ ├── components/ # UIコンポーネント
│ │ ├── TweetCard.jsx # Twitter風ツイート表示
│ │ ├── ReplyOption.jsx # 悪口選択ボタン
│ │ ├── GaugeBar.jsx # HPゲージ
│ │ └── LanguageSwitcher.jsx # 言語切替
│ ├── data/ # 悪口データ
│ │ ├── badwords_ja.json # 日本語悪口リスト
│ │ ├── badwords_ru.json # ロシア語悪口リスト
│ │ └── *.txt # 元データファイル
│ ├── utils/ # ユーティリティ
│ │ ├── gameLogic.js # ゲーム状態管理
│ │ └── wordUtils.js # 悪口処理・ダメージ計算
│ ├── App.jsx # メインアプリ
│ ├── main.jsx # エントリーポイント
│ └── index.css # グローバルスタイル
├── scripts/
│ └── convert_badwords.py # データ変換スクリプト
├── public/ # 静的ファイル
├── package.json
├── vite.config.js
├── tailwind.config.js
└── README.md
- 🌙 ダークテーマ - 目に優しい黒基調
- 🎨 グラデーション - 美しい背景効果
- 💫 アニメーション - スムーズなトランジション
- 📱 レスポンシブ - 全デバイス対応
- ⚡ 高速レスポンス - 瞬時の反応
- 🎯 直感的操作 - 分かりやすいUI
- 🔊 視覚的フィードバック - 明確な状態表示
- 📊 リアルタイム更新 - 即座のゲーム状態反映
// 基本ダメージ計算
const damage = badword.damage * difficultyMultiplier
// イージーモード: +50%
// ノーマルモード: 標準// 累積ブロック率計算
const blockChance = baseBlockRisk * difficultyModifier
// イージーモード: 基本確率 × 0.3
// ノーマルモード: 基本確率 × 0.7// NPC反撃ダメージ
const counterDamage = (baseDamage + desperationBonus + reactionBonus) * difficultyModifier
// イージーモード: -60%
// ノーマルモード: -40%悪口リストは以下のオープンソースプロジェクトから取得：
# 悪口データの変換
python scripts/convert_badwords.py- 悪口リストを準備
src/data/badwords_[言語コード].txt
- JSONに変換
python scripts/convert_badwords.py- wordUtils.jsに言語データを追加
const languages = {
ja: { data: badwordsJa, name: '日本語', flag: '🇯🇵' },
ru: { data: badwordsRu, name: 'Русский', flag: '🇷🇺' },
// 新しい言語を追加
en: { data: badwordsEn, name: 'English', flag: '🇺🇸' }
};各コンポーネントは明確な責任を持つ：
- App.jsx - ゲーム状態管理、UI統合
- TweetCard.jsx - Twitter風ツイート表示
- ReplyOption.jsx - 悪口選択インターフェース
- GaugeBar.jsx - HP/ブロック率の視覚化
- LanguageSwitcher.jsx - 言語切替機能
# 全テスト実行
npm test
# 特定のテスト
npm test -- --grep "GameState"
# カバレッジ確認
npm run test:coverage- ⚡ React.memo - 不要な再レンダリング防止
- 🗜️ Lazy Loading - コンポーネントの遅延読み込み
- 📦 Code Splitting - バンドルサイズ最適化
- 🔄 useCallback/useMemo - 計算結果のキャッシュ
- 対応ブラウザ: Chrome 80+, Firefox 75+, Safari 13+
- Node.js: 16.x以上推奨
- 画面サイズ: 320px～対応
- このリポジトリをフォーク
- フィーチャーブランチを作成 (
git checkout -b feature/amazing-feature) - 変更をコミット (
git commit -m 'Add amazing feature') - ブランチにプッシュ (
git push origin feature/amazing-feature) - プルリクエストを作成
- 🧪 新機能には必ずテストを追加
- 📝 コードにはコメントを記述
- 🎨 Tailwind CSSのクラスを使用
- 🌍 多言語対応を考慮
- ゲームコード: MIT License
- アイコン: Tailwind CSS Icons
- フォント: システムフォント
Made with ❤️ and ☕ by the ReplyBrawl Team
🎮 楽しいレスバライフを！ 🎮