---
title: "用 Codex 做瀏覽器遊戲"
description: "說明如何用 Codex 開發可玩的瀏覽器遊戲，並在 controls、timing、UI feel 和素材上持續驗證。"
verifiedAt: "2026-05-06"
---

import { Cards, Card } from 'fumadocs-ui/components/card';

遊戲開發是 Codex 不只生成程式碼、還要持續驗證體驗的典型場景。真正能玩的瀏覽器遊戲，需要概念設計、渲染層、前端 shell、素材、玩法迴圈，以及反覆調整 controls、timing 和 UI feel。

> [!IMPORTANT]
> 瀏覽器遊戲的第一目標是 first playable loop，不是完整後端、排行榜、賬號系統和素材大全。

<Cards>
  <Card title="Browser games" href="https://developers.openai.com/codex/use-cases/browser-games">
    官方瀏覽器遊戲場景。
  </Card>
  <Card title="Image generation" href="/zh-Hant/docs/codex/official/01-products/21-ide-features">
    用圖片輸入和生成輔助 concept art、sprites、backgrounds。
  </Card>
  <Card title="Figma to code" href="/zh-Hant/docs/codex/official/08-scenarios/95-figma-to-code">
    有視覺參考時，用結構化設計上下文推進 UI。
  </Card>
</Cards>

## 推薦流程

```mermaid
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。

## 起始提示詞

```text
请在这个 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`：

```text
## 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 不遮擋關鍵玩法元素。

## 官方資料

- [Browser games](https://developers.openai.com/codex/use-cases/browser-games)
- [Codex skills](https://developers.openai.com/codex/skills)
- [AGENTS.md](https://developers.openai.com/codex/guides/agents-md)
