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 で自動化してください
リポジトリ命名:
- リポジトリ名は機械的な名前ではなく、ロマンティックで印象に残る名前にしてください
- ただし意味不明になりすぎず、ボクセル世界・夜空・夢・記憶・星・月・箱庭のような世界観を感じる名前を優先してください
- 候補をいくつか考えたうえで、最終的に1つ選んで採用してください
作るもの:
- three.js を使ったボクセルゲーム風 Web アプリ
- 起動後すぐに遊べること
- 地面と簡単な起伏のあるボクセルワールド
- WASD 移動、Space ジャンプ、マウス視点変更
- 左クリックでブロック破壊、右クリックでブロック設置
- 1〜5キーでブロック切替
- 中央クロスヘア、下部ホットバー、右上 FPS 表示
- ウィンドウリサイズ時に canvas と HUD が崩れないこと
世界観・マップ要件:
- 世界の有名な都市をモチーフにしたミニチュア要素をワールド内に入れてください
- 完全再現ではなく、ボクセルらしいデフォルメ表現で構いません
- 少なくとも複数の都市モチーフを感じられるようにしてください
- 例として、塔、橋、高層ビル群、歴史的建造物、広場、運河、寺院風シルエットなど、都市を連想できるランドマーク表現を取り入れてください
- 一目見て「世界の都市を小さな箱庭として旅している」雰囲気が伝わるようにしてください
- 単なる地形だけで終わらず、探索したくなる見た目のアクセントを入れてください
UIデザイン要件:
- UI は Material Design を参考にしてください
- HUD やオーバーレイは、Material Design 的な情報整理、余白、階層感、視認性を意識してください
- カード、パネル、チップ、ラベル、ダイアログ、ボタン表現が必要な場合は、Material Design の考え方に寄せてください
- ただしゲーム画面を邪魔しすぎないように、軽量で洗練された UI にしてください
- 色、タイポグラフィ、余白、角丸、シャドウ、状態変化に一貫性を持たせてください
- 「ただ載っているだけのUI」ではなく、視認性と操作性が高い UI にしてください
実装方針:
- 構成は任せますが、GitHub Pages のサブパス公開で壊れないようにしてください
- アセット参照、base path、ビルド設定、公開パスを Pages 前提で調整してください
- GitHub Pages への公開は CI/CD で行ってください
- GitHub Actions などを使い、main ブランチへの push を契機に build と deploy が自動で走るようにしてください
- 必要なら Pages 用の workflow、設定ファイル、デプロイ設定を追加してください
作業手順:
1. QA inventory を先に作成する
- ユーザー要求
- 実装対象
- 完了報告で主張する内容
をそれぞれ検証可能な項目に分解する
2. GitHub リポジトリを新規作成する
- ロマンティックな候補名を複数考える
- その中から最も雰囲気がよく、用途にも合う名前を1つ選ぶ
- 適切な 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
- クロスヘアの視認性
- テキストの可読性
- リサイズ後の崩れ
- 都市モチーフが視覚的に識別できるか
- 世界観とUIの統一感があるか
- Material Design 参考のUIとして自然に見えるか
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 の両方を作成する
- `README.md` を英語版、`README.ja.md` を日本語版にする
- 2つの README は相互に行き来できるようにする
- README 冒頭に言語切替用のバッジまたはリンクバッジを配置する
- README の先頭付近に、アプリの実スクリーンショットをヘッダー画像として掲載する
- ヘッダー画像は、ゲーム画面の魅力が伝わる代表的なプレイ中スクリーンショットにする
- クロスヘア、ホットバー、ワールドの立体感、都市ミニチュア要素が分かる構図を優先する
- README に技術スタックのバッジを掲載する
- 少なくとも使用した主要技術が分かるようにする
- three.js
- TypeScript または JavaScript
- Vite などのビルドツール
- GitHub Pages
- GitHub Actions
- README には以下を記載する:
- アプリ概要
- 世界観コンセプト
- 操作方法
- ローカル起動方法
- GitHub Pages の公開URL
- CI/CD によるデプロイ方法の概要
11. 最後に結果を報告する
- 採用したリポジトリ名
- 名前に込めたニュアンス
- ボツにした候補名
- GitHub Pages 公開URL
- 実装した機能
- 追加した都市モチーフ要素
- UIデザイン方針
- 構築した CI/CD の概要
- README の言語構成
- 使用した技術スタックバッジ
- 確認済み項目
- 未確認項目
- 残課題
- README に使ったスクリーンショットソース文脈
出典
- primary post: 2030264603125682331
- published at: 2026-03-07 21:49:36 JST
- archive doc: 2030264603125682331