GitHub Pages対応 3D TPS シューティング（縦スライス）

Three.js (CDN) + 素の HTML/CSS/JavaScript だけで実装した、GitHub Pages でそのまま動く 3D TPS シューティングです。

ディレクトリ構成

/
├─ index.html
├─ style.css
├─ README.md
├─ assets/
│  └─ .gitkeep
└─ src/
   └─ main.js

操作

• クリック : ポインタロック / エイム開始
• W A S D : 移動
• Shift : スプリント
• Ctrl : しゃがみ
• Space : ジャンプ
• 左クリック : 射撃（ヒットスキャン）
• R : リロード
• Enter : 死亡後リスタート

実装済み要素（縦スライス）

• 肩越し 3D TPS カメラ（慣性スムージングあり）
• WASD/ジャンプ/しゃがみ/スプリント
• 左クリック射撃（ヒットスキャン）
• 反動（カメラキック）と拡散
• HP、被弾、死亡→リスタート
• 敵AI（巡回→追跡→攻撃→遮蔽物移動）
• 屋外ステージ（地面、遮蔽物、建物風ボックス）
• UI（クロスヘア、HP、弾数、キル数、状態）
• 演出
  • 銃口フラッシュ
  • 着弾パーティクル
  • ヒットマーカー
  • 被弾ビネット
  • 画面揺れ
  • フットステップ/射撃/ヒット/被弾SE（WebAudio合成、追加アセット不要）
• 簡易ポストプロセス風オーバーレイ（スキャンライン/色収差風）

GitHub Pages 公開手順

1. このリポジトリを GitHub に push
2. GitHub の Settings → Pages
3. Build and deployment を Deploy from a branch に設定
4. Branch を main（または利用ブランチ） / Folder を / (root) に設定
5. 数分後、発行された URL にアクセス

静的ファイルのみで構成されているため、Pages でそのまま動作します。

設計概要

src/main.js に以下責務を分離して実装しています。

• GameState
  • プレイヤーHP、弾数、キル数などのゲーム状態を保持
• NetAdapter
  • 将来のマルチ化を見据えた通信境界（現状は no-op 実装）
• AudioSystem
  • WebAudio による効果音生成
• TPSGame
  • レンダリング、入力、カメラ、プレイヤー制御、射撃、敵AI、UI同期

マルチ化ロードマップ

GitHub Pages 単体では常時接続サーバがないためリアルタイムマルチは不可です。 将来の拡張は次の順序を想定しています。

1. 状態同期のDTO定義
   • GameState からネットワーク送受信に必要な最小スナップショットを抽出
2. NetAdapter の具体実装を追加
   • WebSocketNetAdapter を新規作成
   • connect/send/onMessage を実装
3. 権威サーバ方式に移行
   • 命中判定・ダメージ計算をサーバ側で処理
4. 補間/予測の導入
   • リモートプレイヤーの補間表示
   • ローカル操作のクライアント予測
5. マッチ/ルーム管理追加
   • ルームID・再接続処理・簡易チート対策

これによりフロントエンド静的配信（Pages）を維持しながら、別ホストの WebSocket サーバを追加して段階的にマルチ化できます。