用 Codex 做瀏覽器遊戲
說明如何用 Codex 開發可玩的瀏覽器遊戲，並在 controls、timing、UI feel 和素材上持續驗證。
遊戲開發是 Codex 不只生成程式碼、還要持續驗證體驗的典型場景。真正能玩的瀏覽器遊戲，需要概念設計、渲染層、前端 shell、素材、玩法迴圈，以及反覆調整 controls、timing 和 UI feel。
瀏覽器遊戲的第一目標是 first playable loop，不是完整後端、排行榜、賬號系統和素材大全。
Browser games
官方瀏覽器遊戲場景。
Image generation
用圖片輸入和生成輔助 concept art、sprites、backgrounds。
Figma to code
有視覺參考時，用結構化設計上下文推進 UI。
推薦流程
flowchart LR
Plan["PLAN.md"] --> Loop["core loop"]
Loop --> Play["live browser playtest"]
Play --> Tune["controls / timing / UI feel"]
Tune --> Assets["assets and prompts"]
Assets --> Verify["build / test / screenshot"]適合 Codex 的瀏覽器遊戲任務：
- 從零定義 game plan。
- 搭 first playable prototype。
- 迭代 controls、visuals、deployment。
- 生成 concept art、sprites、backgrounds、UI assets。
- 用 live browser 試玩並截圖驗證。
- 接入 OpenAI-powered features 前先核對當前官方 API 文件。
不適合第一輪就做：
- 完整多人後端。
- 複雜經濟系統。
- 大量付費素材管線。
- 賬號、支付、排行榜全套。
- 沒有玩法迴圈的視覺 demo。
起始提示詞
请在这个 repo 中规划并构建一个 browser game。
先创建 PLAN.md，不要直接开始写完整项目。
PLAN.md 需要包含：
- player goal
- main loop
- inputs and controls
- win and fail states
- progression or difficulty
- visual direction
- stack and hosting assumptions
- milestone order
第一阶段只交付 first playable loop。
每完成一个小功能，运行 build/test，并用浏览器实际试玩。
素材 prompt 保存到 .prompts/，工作记录保存到 .logs/。這個 prompt 的重點是先 plan，再 build。遊戲任務容易變長，過程日誌和素材 prompt 能讓後續迭代有依據。
技術堆疊選擇
只做 first playable prototype 時，優先選簡單前端堆疊：
- Next.js 或 Vite 負責 app shell。
- Phaser、PixiJS 或 Canvas/WebGL 層負責 game rendering。
- 靜態 JSON 或本地狀態儲存關卡和配置。
只有當遊戲確實需要 persistence、matchmaking、leaderboards 或 pub/sub 時，再考慮後端、資料庫和佇列。
不要讓 Codex 一開始就搭全堆疊模板。先把核心 loop、輸入、勝負條件和視覺反饋跑通。
用 AGENTS.md 固定執行方式
遊戲專案適合寫一份簡短 AGENTS.md：
## Browser game rules
- 以 PLAN.md 作为开发依据。
- 每次只实现一个 milestone。
- 完成 feature 后运行 build/test。
- 用浏览器试玩并检查 controls、timing、UI overlap、win/fail state。
- 图片素材 prompt 保存到 .prompts/。
- 工作记录保存到 .logs/。
- 不新增后端，除非 PLAN.md 明确进入后端阶段。AGENTS.md 的作用不是寫願景，而是讓 Codex 長時間工作時仍然遵守計劃、驗證結果並使用正確工具。
素材一致性
使用 image generation 時，讓 Codex 儲存每一批圖片的 prompt。後續繼續生成同風格 sprites、backgrounds 或 UI assets 時，複用這些 prompts 比重新描述風格更穩定。
素材 prompt 至少包含：
- art direction。
- camera angle。
- color language。
- UI style。
- resolution / aspect ratio。
- transparent background requirement。
不要把版權不清的素材直接混入可釋出專案。需要真實商用素材時，單獨做授權和來源記錄。
試玩和迭代
第一版完成後，不要只看程式碼。用瀏覽器實際試玩，檢查：
- controls 是否順手。
- timing 是否合理。
- UI 是否遮擋。
- game loop 是否閉合。
- win/fail state 是否可觸發。
- 視覺元素是否符合 plan。
- 移動端和桌面端是否都能操作。
如果畫面不對、操作不順、迴圈不閉合，就繼續迭代這些點。遊戲好壞不能只靠型別檢查證明。
驗收清單
PLAN.md清楚定義 first playable。- 第一階段沒有超範圍上後端或賬號系統。
- build/test 真實執行。
- 瀏覽器試玩有截圖或明確觀察結論。
- controls、timing、win/fail state 可驗證。
- 素材 prompt 被儲存，素材來源可追溯。
- UI 不遮擋關鍵玩法元素。