マインスイーパ

Svelte 5 + TypeScript + Tailwind CSS で作られたクラシックなマインスイーパゲームです。

🎮 ゲーム仕様

• 難易度: 初級（9×9グリッド、地雷10個）
• 操作方法:
  • 左クリック: セルを開く
  • 右クリック: 旗を立てる/外す
  • キーボード: Enter/Spaceキーでセルを開く
• 機能:
  • タイマー（秒単位）
  • 残り地雷数表示
  • リセットボタン
  • 勝利/敗北アニメーション
  • レスポンシブデザイン

🛠️ 技術スタック

• フレームワーク: SvelteKit (Svelte 5)
• 言語: TypeScript
• スタイリング: Tailwind CSS
• ビルドツール: Vite
• テスト: Vitest
• リンター: ESLint
• フォーマッター: Prettier

🚀 セットアップ

依存関係のインストール

npm install

開発サーバーの起動

npm run dev

開発サーバーが http://localhost:5173/ で起動します。

ビルド

npm run build

プレビュー

npm run preview

テスト実行

npm run test        # 全テスト実行
npm run test:unit   # ユニットテスト
npm run test:e2e    # E2Eテスト

📁 プロジェクト構造

src/
├── lib/
│   ├── components/
│   │   ├── Cell.svelte          # セルコンポーネント
│   │   ├── GameBoard.svelte     # ゲームボード
│   │   ├── GameHeader.svelte    # ヘッダー（タイマー、リセット、地雷数）
│   │   └── GameStatus.svelte    # ゲーム状態表示
│   ├── stores/
│   │   └── gameStore.ts         # ゲーム状態管理
│   ├── types/
│   │   └── game.ts             # 型定義
│   └── utils/
│       ├── constants.ts         # ゲーム定数
│       └── gameLogic.ts        # ゲームロジック
└── routes/
    └── +page.svelte            # メインページ

🎯 ゲームルール

1. 地雷の無いセルを全て開くとゲームクリア
2. 地雷セルを開くとゲームオーバー
3. 地雷の目印として旗を立てることが可能
4. 開いたセルには近傍の地雷数を表示
5. 地雷が無い空白セルは連続的に自動展開

🎨 UI特徴

• クラシックなWindows マインスイーパスタイル
• 3D風の立体的なセルデザイン
• 数字の色分け（1-8の地雷数に応じて）
• アニメーション効果（勝利時、敗北時）
• レスポンシブ対応

📱 対応デバイス

• デスクトップ
• タブレット
• スマートフォン

🤝 開発

このプロジェクトは教育目的で作成されており、Svelte 5の新機能（runes）を活用しています。

📄 ライセンス

MIT License