GitHub CLI (gh) は認証済みです
playwright-interactive を使って、ゼロからブラウザで動く three.js のボクセルゲームアプリを作ってください。
プロンプト本文
text
playwright-interactive を使って、ゼロからブラウザで動く three.js のボクセルゲームアプリを作ってください。
前提:
- GitHub CLI (gh) は認証済みです
- GitHub リポジトリの新規作成から始めてください
- 作業ディレクトリは Windows の `D:\Prj` 配下を使ってください
- `D:\Prj` にリポジトリを clone / 作成して問題ありません
- 最終的に GitHub Pages にデプロイし、公開URLを Playwright で実際に確認してください
- GitHub Pages へのデプロイは手動ではなく、CI/CD で自動化してください
作るもの:
- three.js を使ったボクセルゲーム風 Web アプリ
- 起動後すぐに遊べること
- 地面と簡単な起伏のあるボクセルワールド
- WASD 移動、Space ジャンプ、マウス視点変更
- 左クリックでブロック破壊、右クリックでブロック設置
- 1〜5キーでブロック切替
- 中央クロスヘア、下部ホットバー、右上 FPS 表示
- ウィンドウリサイズ時に canvas と HUD が崩れないこと
実装方針:
- 構成は任せますが、GitHub Pages のサブパス公開で壊れないようにしてください
- アセット参照、base path、ビルド設定、公開パスを Pages 前提で調整してください
- GitHub Pages への公開は CI/CD で行ってください
- GitHub Actions などを使い、main ブランチへの push を契機に build と deploy が自動で走るようにしてください
- 必要なら Pages 用の workflow、設定ファイル、デプロイ設定を追加してください
作業手順:
1. QA inventory を先に作成する
- ユーザー要求
- 実装対象
- 完了報告で主張する内容
をそれぞれ検証可能な項目に分解する
2. GitHub リポジトリを新規作成する
- 適切な public リポジトリを作る
- `D:\Prj` 配下で作業開始する
3. ローカル実装を行う
- 必要な依存を導入する
- dev server を継続セッションで起動する
- `127.0.0.1` のURLを Playwright で開く
4. 反復実装を行う
- 同じ Playwright セッションを維持する
- コード変更後は reload で確認する
- 主要コントロールをすべて実操作で確認する
- reversible な状態変化は往復確認する
5. functional QA と visual QA を分離して実施する
- functional QA:
- 移動
- 視点変更
- ジャンプ
- ブロック設置
- ブロック破壊
- ブロック切替
- visual QA:
- 初期表示
- 移動中
- 設置後
- 破壊後
- 密度が高い状態
- HUD重なり
- clipping / overflow
- クロスヘアの視認性
- テキストの可読性
- リサイズ後の崩れ
6. exploratory pass を行う
- 30〜90秒程度、実際に遊ぶように確認する
- 違和感、誤判定、視認性の低さ、パフォーマンス低下、ちらつきがあれば修正する
7. GitHub Pages 用の CI/CD を構築する
- GitHub Actions などで build と deploy を自動化する
- main ブランチへの push で GitHub Pages が更新されるようにする
- Pages 公開に必要な設定をリポジトリに含める
- 手動作業前提にせず、リポジトリを clone した後でも CI/CD で再現可能な状態にする
8. GitHub Pages にデプロイする
- 必要な変更を commit / push する
- CI/CD が正常に完走することを確認する
- GitHub Pages の公開URLを取得する
9. 公開版 QA を実施する
- GitHub Pages のURLを Playwright で開く
- ローカル確認とは別に公開版でも確認する
- 初期表示、移動、視点変更、設置、破壊、HUD表示を確認する
- アセット読込、パス解決、公開環境での表示崩れを確認する
- 公開版で問題があれば修正して再度 push し、CI/CD 経由で再デプロイする
10. README を整備する
- README の先頭付近に、アプリの実スクリーンショットをヘッダー画像として掲載する
- ヘッダー画像は、ゲーム画面の魅力が伝わる代表的なプレイ中スクリーンショットにする
- クロスヘア、ホットバー、ワールドの立体感が分かる構図を優先する
- README には以下を記載する:
- アプリ概要
- 操作方法
- ローカル起動方法
- GitHub Pages の公開URL
- CI/CD によるデプロイ方法の概要
11. 最後に結果を報告する
- GitHub リポジトリ名
- GitHub Pages 公開URL
- 実装した機能
- 構築した CI/CD の概要
- 確認済み項目
- 未確認項目
- 残課題
- README に使ったスクリーンショットソース文脈
出典
- primary post: 2030238984303948092
- published at: 2026-03-07 20:07:48 JST
- archive doc: 2030238984303948092