註冊
ChatGPTCodex

用 Codex 做小遊戲、小工具：先寫 PLAN.md 把規則說死，再讓它在真實瀏覽器裏邊玩邊改，附 4 段提示詞

一句“幫我做個貪吃蛇”只能得到一個湊合的版本。官方瀏覽器遊戲用例的做法是：先讓 Codex 用 /plan 寫出 PLAN.md，把目標、操作、勝負、難度說清，再用 AGENTS.md 約束它自己測試，最後用截圖迭代。本文給 4 段提示詞。

NNathaniel bigo··原創首發·AI 輔助撰寫
7 分鐘讀完
資料核對於 2026-11-05 · 依據官方文檔與公開資料整理 Plus 帳號
本文根據 Codex 官方用例《Create browser-based games》和《Prompting》整理，資料核對於 2026-11-05。配圖為本站整理的示意圖，不是軟件截圖。本站（bigolab.com）不是 OpenAI 官方網站。安裝與配置見 /guides/codex-getting-started，做一個普通網頁見 /guides/codex-build-website-from-scratch，本文只講小遊戲和小工具。

適用於誰

  • 想做一個貪吃蛇、2048、記憶翻牌、計時器、記帳小工具之類小項目，但不會寫代碼的人；
  • 試過一句話讓 AI 做遊戲，結果規則亂、按鍵不靈、改一處壞一處的人；
  • 想做個人練手項目，希望 Codex 自己測試、自己改的人。

結論先說

  1. 先計劃，再動手。 官方用例明確說，“build a game”太模糊，要讓 Codex 先寫一份 PLAN.md，把遊戲定義清楚。可以用 /plan 進入計劃模式，再把輸出存成 PLAN.md。
  2. PLAN.md 至少寫清：玩家目標、主循環、操作方式、勝負狀態、難度或進度、視覺方向、技術棧與部署假設、做事的順序。
  3. 用 AGENTS.md 約束它的工作方式：做完一個功能就跑構建和測試、按 PLAN.md 做、把過程記在 .logs 裏。
  4. 讓它在真實瀏覽器裏測試。 官方推薦用 Playwright 交互技能讓它自己玩遊戲、看當前狀態，再調整操作和手感。
  5. 用截圖和具體反饋迭代，計劃越清楚，第一版越接近你想要的。

用 Codex 做小遊戲的四步：寫 PLAN.md、AGENTS.md 約束、瀏覽器裏測試、截圖反饋迭代

圖：本站根據 官方用例《Create browser-based games》 整理的示意圖

一、為什麼要先寫 PLAN.md

遊戲和普通頁面不同：一個能玩的遊戲需要規則、渲染、操作、狀態和美術，改一處很容易影響別處。官方的經驗是，Codex 需要知道每一塊該怎麼實現，並且在做的過程中反覆回頭參考。把這些寫進文件，比留在聊天記錄裏可靠，聊天太長時也不會丟。

PLAN.md 建議包含官方列的這些條目：

  • 玩家的目標是什麼；
  • 主循環：玩家一回合做什麼、系統怎麼反應；
  • 操作：鍵盤、滑鼠還是觸屏；
  • 勝利和失敗的條件；
  • 難度或進度怎麼變化；
  • 視覺風格；
  • 技術棧和發佈方式；
  • 里程碑順序（先做能玩的最小版本）。

二、技術棧怎麼選

官方示例給的是比較完整的方案：用 Next.js 配 Phaser 或 PixiJS 做前端和渲染，需要排行榜、匹配、存檔時再加 Fastify、WebSocket、Postgres 和 Redis。這是為大型多人遊戲準備的。

如果你只是想做個單機小遊戲或小工具，以下是本站的建議（不是官方說法）：先讓它用一個 HTML 文件（頁面、樣式、腳本放在一起）起步，能在瀏覽器裏直接打開；確實需要儲存數據或多人聯機，再升級。技術棧在 PLAN.md 裏寫死，之後不要讓它中途換。

三、4 段可以直接複製的提示詞

方括號裏是要你自己填的內容。

1. 先寫計劃，不寫代碼

我想做一個 [小遊戲名稱，例如“2048”]。請先進入計劃模式，不要寫代碼。
請寫出 PLAN.md，包含：玩家目標、主循環、操作方式（[鍵盤方向鍵 / 手機滑動]）、勝負條件、難度變化、視覺風格（[簡潔、扁平]）、技術棧（先用單個 HTML 文件，不引入框架）、分幾步做以及每一步完成的標準。
有不清楚的地方先問我，不要自己假設。

2. 寫 AGENTS.md，約束它的工作方式

請在項目根目錄創建 AGENTS.md，內容包括：
- 這是一個 [遊戲類型]，技術棧見 PLAN.md；
- 每完成一個功能就運行構建和測試來驗證；
- 按 PLAN.md 的順序做，不要提前做後面的功能；
- 把工作過程記錄到 .logs/ 下，方便我回頭看你的決定；
- 在瀏覽器裏實際運行並檢查畫面和操作，不滿意就繼續改。
先給我看內容，確認後再寫入文件。

3. 按計劃實現並自己測試

請按 PLAN.md 實現第 1 步：做出最小可玩的版本。
完成後：
1. 啟動本地服務或直接打開頁面，告訴我怎麼訪問；
2. 自己把遊戲玩一遍，檢查操作是否靈敏、勝負判斷是否正確；
3. 列出你測試了哪些情況、發現了哪些問題、修了哪些；
4. 還沒做的功能不要提前做。

4. 用反饋迭代

我玩了一下，有這些問題：
1. [按方向鍵時有時沒反應]
2. [分數沒有儲存，刷新後歸零]
3. [手機上按鈕太小]
請逐條復現並修復，每修一條說明原因；只改相關代碼，不要改其他功能。
修完後重新把整個流程玩一遍，確認沒有把別處改壞。

官方《Prompting》也建議迭代時用小而具體的請求，例如“只改標題區域”，喜歡的改動及時提交，不喜歡的還原，並告訴 Codex 你還原了什麼，免得它下一輪把你的修改覆蓋回去。截圖可以作為視覺依據，但操作邏輯、懸停效果這類圖裏看不出的，要用文字補充。

四、做小工具時的補充

計時器、記帳、待辦、單位換算這類小工具，思路和遊戲相同，只是 PLAN.md 裏的“勝負條件”換成“輸入、輸出和邊界情況”：

  • 輸入哪些數據、允許什麼範圍，輸錯了怎麼提示；
  • 數據存哪裏。僅放在瀏覽器裏的數據，換個瀏覽器或清理緩存就沒了，需要長期儲存的要在計劃裏寫明；
  • 涉及金額、日期的計算，讓它寫幾個用例，你自己拿計算器核對。

五、什麼時候該停

做小遊戲時什麼情況要停下來重新規劃：規則反覆改、越改越亂、改一處壞一處、素材很多耗時很長

圖：本站根據 官方用例《Create browser-based games》 整理的示意圖

官方提到，如果有大量圖片素材要生成，首版有時要花數小時。你可以先讓它只做玩法，素材用佔位圖，玩法穩定後再做美術。同時：

常見問題

Q：遊戲做好了怎麼發佈給別人玩？

單個 HTML 文件可以直接發給別人打開，或者放到靜態託管服務。具體選哪個、怎麼部署，可以讓 Codex 列出方案和步驟，你再自己決定，部署前不要把密鑰寫進代碼。

Q：可以用別人的圖片、音樂嗎？

注意版權和授權。能用自己畫的、自己生成並確認可商用的，或者明確授權的素材，來源不明的不要放進要發佈的項目。

Q：做遊戲會很費額度嗎？

帶大量素材和長時間自我測試的任務消耗會比較大。Codex 隨 ChatGPT 套餐提供，額度以官方頁面為準，需要更多額度可以看看 /chongzhi/chatgpt-plus 裏的說明。

參考資料

  • Codex 官方用例：Create browser-based games — https://learn.chatgpt.com/use-cases/browser-games
  • Codex 官方文檔：Prompting — https://learn.chatgpt.com/docs/prompting

Nathaniel 的更多內容

  1. 01

    Claude Code 在 Windows 上的常見坑：Git Bash 還是 PowerShell、路徑反斜槓、假報錯、WSL 怎麼選

    Windows 上用 Claude Code，裝好之後最容易踩的是：用哪個 shell、路徑寫法不一致、grep 沒匹配就報錯、鉤子沒生效、WSL 和原生怎麼選。本文逐條按官方文檔整理原因和處理辦法，附三段提示詞和一張對照表。

    Claude0
  2. 02

    Claude Code Hooks 實戰「提交前自動跑測試」：PreToolUse 攔住 git commit，測試不過就退出碼 2，附 Windows 注意點

    只寫一個完整例子：讓 Claude Code 每次要執行 git commit 之前，先自動跑項目測試，沒通過就攔下並把輸出交給它修。本文按官方 Hooks 文檔給出腳本、settings.json 配置、測試方法、排錯和 Windows 的兩處坑。

    Claude0
  3. 03

    Claude Code 自定義斜槓命令與 Skill 實戰：從零寫一個「生成更新日誌」的 /release-notes，含傳參、預執行命令和調試

    概念看過了，還是不知道從哪下手？本文按 Claude Code 官方「Extend Claude with skills」寫一個完整可用的例子：用 /release-notes 根據 git 記錄生成更新日誌，覆蓋目錄、frontmatter、傳參、預執行命令、預授權和調試。

    Claude0
  4. 04

    Claude Code 部署網站：先寫 Dockerfile 和 compose 在本機跑通，再按清單上雲伺服器，別讓它直接改線上

    想讓 Claude Code 幫你把網站部署到雲伺服器。本文只寫通用做法，按 Docker 官方文檔講：讓它寫 Dockerfile、.dockerignore 和 compose，在本機跑通，端口和數據卷怎麼設，再給出上線清單，並說明為什麼不要讓它直接動線上機器。

    Claude0
  5. 05

    Claude Code 寫爬蟲與數據清洗：先查 robots.txt 和網站條款，控制頻率，原始數據留一份再清洗

    想讓 Claude Code 寫爬蟲抓數據再清洗。本文先講合規：robots.txt 不是授權也不是安全措施、網站條款要自己讀；再講怎麼用 Python 標準庫檢查規則、小樣本先試、儲存原始數據，以及用 pandas 清洗，附四段提示詞。

    Claude0
  6. 06

    Claude Code 寫 Chrome 擴展：按 Manifest V3 起步，加載未打包的擴展，改了哪些文件要重新加載

    想讓 Claude Code 幫你寫一個 Chrome 擴展。本文按 Chrome 官方擴展文檔講：manifest.json 的最小寫法、在 chrome://extensions 加載未打包的擴展、哪些改動要刷新、怎麼看控制檯和報錯，再給四段提示詞，以及權限要盡量少。

    Claude0

同產品的其他教學

  1. 01

    OpenAI API 的 token 怎麼算、怎麼估算費用：input_tokens 計數接口、tiktoken 和隱藏的輸出 token

    發請求前想知道會用多少 token？官方有 Responses 的 input_tokens 計數接口，能把文字、圖片、文件、工具定義一起算準；本地 tiktoken 只適合純文本。本文給 Python 和 Node 示例，講輸出 token 為什麼可能比看到的多，以及怎麼估算費用。

    ChatGPT0
  2. 02

    OpenAI API Node.js / TypeScript 快速上手：npm install openai、example.mjs 第一個請求，到流式、函數調用、聯網搜尋

    用 Node.js 調 OpenAI API：設定 OPENAI_API_KEY 環境變量，npm install openai，新建 example.mjs，用 client.responses.create 發出第一個請求。並列出圖片、文件、流式、函數調用、聯網搜尋和錯誤捕獲的 Node 寫法。

    ChatGPT0
  3. 03

    OpenAI API 用量層級（usage tiers）與速率限制怎麼提升：Free、Build、Launch、Grow 和後台 Limits 頁

    OpenAI API 的限速不是固定的：官方按累計購買額度把組織分成 Free、Build、Launch、Grow 四個層級，達到門檻自動升級。本文講 RPM、TPM 等指標、怎麼在後台查自己的限額、響應頭怎麼讀、花費上限和限速的區別，以及怎麼讓限額變得夠用。

    ChatGPT0
  4. 04

    OpenAI API 報錯 400、401、403、404、429、500、503 怎麼排查：按官方錯誤碼頁逐個看原因和解決辦法

    調用 OpenAI API 返回 400、401、403、404、429、500、503，各自什麼意思？本文按官方 Error codes 頁，每個狀態碼一節，寫清官方給的原因和解決辦法，並說明 404 在官方頁面裏的位置、429 的六種情形，附 Python 和 Node 的錯誤捕獲寫法。

    ChatGPT0
  5. 05

    OpenAI Realtime API 是什麼：語音到語音會話、WebRTC 與 WebSocket、臨時密鑰和事件機制

    Realtime API 讓模型直接處理音頻，做可以隨時打斷的語音助手。本文按官方文檔講它是什麼、什麼時候用、瀏覽器接入的流程、session 與事件、可用聲音、60 分鐘會話上限、安全標識，以及它和轉寫、文字轉語音的分工。

    ChatGPT0
  6. 06

    OpenAI 圖像生成 API 怎麼用：gpt-image 系列、images.generate 與 Responses 工具、尺寸質素和遮罩編輯

    用 OpenAI API 生成或編輯圖片，有 Image API 和 Responses 裏的 image_generation 工具兩條路。本文按官方文檔給 Python 和 Node 示例，講 gpt-image 模型選擇、尺寸質素格式參數、遮罩編輯、被攔截時的錯誤處理，以及需要組織驗證的提醒。

    ChatGPT0

0 條評論

登入 後參與評論

還沒有評論，來搶沙發～