Skip to content

GEMINI.md

Latest commit

 

History

History
119 lines (92 loc) · 4.98 KB

GEMINI.md

File metadata and controls

119 lines (92 loc) · 4.98 KB

GEMINI.md

プロジェクト概要

このプロジェクトは、リアルタイム対戦型のカードゲームです。クライアントはVue.jsとPhaser.js、サーバーはColyseus(Node.js)で構築されています。

主な特徴

  • リアルタイム対戦: Colyseusを利用して、2人のプレイヤーがリアルタイムで対戦します。
  • カードベースの戦闘: プレイヤーはスキルカードと条件カードを組み合わせて、独自のスキルセットを構築します。
  • ターン制バトル: 10ターンで1ラウンドが終了し、5ラウンドで勝敗が決まります。
  • リッチな演出: Phaser.jsによるアニメーションやエフェクトで、ゲームプレイを盛り上げます。

技術スタック

  • フロントエンド:
    • Vue.js 3
    • Phaser.js 3
    • Pinia (状態管理)
    • Vite (ビルドツール)
    • Colyseus.js (クライアントSDK)
  • バックエンド:
    • Colyseus (Node.jsフレームワーク)
    • TypeScript
    • Express.js
  • その他:
    • Prettier (コードフォーマッター)
    • npm Workspaces (モノレポ管理)

プロジェクト構造

auto-project/
├── backend/      # Colyseusサーバーサイド
│   ├── src/
│   │   ├── rooms/
│   │   │   └── MyRoom.ts       # ゲームロジックの中核
│   │   ├── data/
│   │   │   └── card.ts         # カードデータ
│   │   └── index.ts          # サーバーエントリーポイント
│   └── package.json
├── client/       # Vue.js + Phaser.jsクライアントサイド
│   ├── src/
│   │   ├── scenes/
│   │   │   └── BattleScene.js  # 戦闘シーン
│   │   ├── core/             # ゲームのコアロジック
│   │   ├── ui/               # UIコンポーネント
│   │   ├── colyseus/         # Colyseusクライアント設定
│   │   └── main.js           # クライアントエントリーポイント
│   └── package.json
└── package.json      # ルート

セットアップと実行

  1. 依存関係のインストール:

    npm install

  2. 開発サーバーの起動:

    npm run dev

    これにより、クライアントとサーバーが同時に起動します。

  3. ビルド:

    npm run build

ゲームフロー

  1. マッチング: 2人のプレイヤーがルームに参加すると、ゲームが開始されます。
  2. スキル選択: 各ラウンドの開始時に、プレイヤーはランダムに配られるスキルカードから3枚を選択します。
  3. 戦闘:
    • プレイヤーは、事前に設定したスキルセットと、ラウンドごとに選択したスキルカードを使って戦います。
    • スキルは、MPを消費して発動します。
    • 10ターンが経過するか、どちらかのHPが0になるとラウンドが終了します。
  4. 勝敗:
    • 5ラウンド終了時点で、勝利数の多いプレイヤーが勝利となります。

主要なファイル

backend/src/rooms/MyRoom.ts

  • Colyseusのルームで、サーバーサイドのゲームロジックを管理します。
  • プレイヤーの参加、離脱、メッセージの処理を行います。
  • ゲームの状態(ターン、ラウンド、HPなど)を管理し、クライアントにブロードキャストします。
  • 戦闘のロジック(スキルの使用、ダメージ計算など)を処理します。

client/src/scenes/BattleScene.js

  • Phaser.jsのシーンで、戦闘画面の描画とインタラクションを担当します。
  • キャラクター、UI要素(HPバー、スキルボタンなど)を作成・管理します。
  • サーバーからの情報に基づいて、ゲームの状態を更新します。
  • プレイヤーの入力(スキルボタンのクリックなど)を処理し、サーバーに送信します。

client/src/core/

  • Character.js: プレイヤーと敵のキャラクターの状態(HP, MPなど)を管理します。
  • CharacterView.js: キャラクターのスプライト、HPバーなどの表示を管理します。
  • BattleManager.js: 戦闘の進行を管理し、アニメーションやエフェクトを再生します。
  • Skill.js: スキルのデータを管理します。

今後の展望 (提案)

  • テストの拡充: MyRoom.tsのロジックをテストするユニットテストを追加する。
  • UIの改善:
    • ドラッグ&ドロップによるスキルセットの構築。
    • より洗練されたアニメーションとエフェクトの追加。
  • 新機能の追加:
    • 新しいスキルカード、キャラクターの追加。
    • ランキング機能。
    • 観戦モード。