2025年度Webゲーム課題

@rinto hasegawa rinto hasegawa authored 23 days ago
.devcontainer [update] pixi.jsをバージョン8.16.0に更新し、関連する依存関係を調整 1 month ago
.github [update] README.mdを公開向けに整備,LICENSEファイルを追加 23 days ago
.vscode [update] docs整理: ENV_01内容修正,ディレクトリ構造分離,フォルダ・ファイル番号再編成 24 days ago
apps [remove] 未使用のデフォルトアセット preact.svg を削除 23 days ago
docs [remove] 改番前のENV_08・ENV_09を削除 23 days ago
packages/ shared [add] ロビーにチーム割り当て方式の設定とプレイヤー選択機能を追加 27 days ago
scripts refactor: ts-prune-filterスクリプトを追加し、パッケージの不要なエクスポートを整理するための設定を追加 1 month ago
test Merge pull request #285 from rintoHasegawa/chore/260320_load-bot_env-local-setup 24 days ago
.gitignore [add] モノレポ環境の初期構築(pnpm, Vite, TypeScript) 2 months ago
.npmrc [add] モノレポ環境の初期構築(pnpm, Vite, TypeScript) 2 months ago
CLAUDE.md [update] config定数READMEへの参照をCLAUDE.mdに移動,README.mdから削除 23 days ago
Dockerfile [fix] pnpmの確認をスキップさせるためのCI環境変数を追加 1 month ago
LICENSE [update] README.mdを公開向けに整備,LICENSEファイルを追加 23 days ago
README.md [update] README.mdを公開向けに整備,LICENSEファイルを追加 23 days ago
docker-compose.prod.yml [add] Docker環境設定と開発用コンテナ構成を追加 2 months ago
docker-compose.yml [update] Docker環境設定の更新とnode_modulesボリューム管理の改善 2 months ago
package.json refactor: ts-prune-filterスクリプトを追加し、パッケージの不要なエクスポートを整理するための設定を追加 1 month ago
pnpm-lock.yaml [add] PWA対応の設定を追加 27 days ago
pnpm-workspace.yaml [add] テスト用のボットローダーと設定ファイルを追加し、CLI引数のサポートを強化 1 month ago
README.md

Pixel Paint War

タイトル画面

チーム対抗のリアルタイム陣取りペイントバトルゲームです。 最大4チームのプレイヤーがブラウザ上で同じフィールドに参加し、制限時間内に自チームの色でマスを塗りつぶして陣地を広げます。 終了時に最も多くのセルを塗ったチームが勝利です。

ゲーム画面

技術スタック

区分技術
フロントエンドVite + Preact + TypeScript
バックエンドNode.js + TypeScript
通信Socket.IO (WebSocket)
描画Pixi.js (WebGL)
パッケージ管理pnpm workspaces (monorepo)
開発環境Docker Dev Container

開発環境のセットアップ

必要なもの: Docker、VS Code、VS Code拡張機能「Dev Containers」

  1. リポジトリをクローンする
  2. VS Codeでフォルダを開く
  3. 左下の「><」アイコン →「Reopen in Container」を選択する
  4. コンテナの起動を待つ(初回は数分かかります)

起動後、以下のコマンドで動作確認できます。

# 共有パッケージのビルド
pnpm --filter @repo/shared build

# クライアント起動(http://localhost:5173)
pnpm --filter client dev

# サーバ起動
pnpm --filter server dev

詳細は ENV_04_環境構築手順書.txt を参照してください。

デプロイ

クライアント(静的ファイル)とサーバ(Node.js)を別々にデプロイします。 ビルド時に VITE_PROD_SERVER_URL にサーバのURLを設定する必要があります。

詳細は各手順書を参照してください。

デプロイ先ドキュメント
RenderENV_09_Renderデプロイ手順.txt
研究室サーバ(Nginx + Docker)ENV_10_研究室サーバデプロイ手順書.txt
環境変数一覧ENV_08_環境変数設定.txt

ドキュメント

開発ガイド

ドキュメント内容
GUIDE_01_ドキュメント作成ガイド.txtドキュメントの書き方・フォーマット規則
GUIDE_02_ファイル命名規則.txtファイル・ディレクトリの命名規則
GUIDE_03_Git運用ルール.txtブランチ・コミットの運用ルール
GUIDE_04_コードコメント規則.txtコードコメントの書き方
GUIDE_05_プロトコル追加手順.txtSocket.IOイベントの追加手順

環境・構成

ドキュメント内容
ENV_01_環境構築・技術スタック.txt技術スタックとプロジェクト構成
ENV_02_ディレクトリ構造.txtソースコードのディレクトリ構造
ENV_04_環境構築手順書.txt開発環境のセットアップ手順
ENV_05_Docker運用操作ガイド.txtDockerの運用・操作コマンド

仕様

ドキュメント内容
SPEC_01_ゲーム概要_画面遷移.txtゲーム概要・画面遷移フロー
SPEC_02_ロビー仕様.txtロビー画面の仕様
SPEC_03_ゲームプレイ仕様.txtゲームプレイの詳細仕様
SPEC_04_HUD_UI仕様.txtHUD・UIの仕様
SPEC_05_リザルト仕様.txtリザルト画面の仕様

技術詳細

ドキュメント内容
TECH_01_通信最適化.txt通信量削減・最適化の実装方針
TECH_02_時刻同期_ラグ対策.txt時刻同期・ラグ補正の実装方針
TECH_03_描画最適化.txt描画パフォーマンス最適化の実装方針

テスト

ドキュメント内容
TEST_01_負荷テスト仕様.txt負荷テストの仕様・実行手順

作者

Rinto Hasegawa, Shimoji Ryuki

ライセンス

MIT