ChatGPT Sites: 只用手機操作,就能做出有完整前後端架構的網頁遊戲？
只用手機版 ChatGPT 與 Sites，我透過六次簡短對話完成並公開一款有音樂、帳號、資料庫、API 與排行榜的網頁遊戲。
沒有 AI 的時候，要做一款真正能上線的網頁遊戲，通常不是把畫面做出來就結束了。你得處理遊戲玩法、手機操作、響應式版面、背景音樂、帳號驗證、資料庫、API、密碼安全、排行榜，以及最後的建置與部署。
有了 AI 以後，開始可以直接在網頁上和 AI 對話來製作遊戲；但做好的遊戲通常只有前端頁面，可以開啟、可以遊玩，卻沒有資料庫，也沒有 API。要讓它從一個前端作品變成真正有資料保存與後端邏輯的完整網站，仍然需要自己處理後端、資料庫與部署。
要讓遊戲具備完整的前後端架構，不僅需要準備桌上型的完整開發環境，還得具備 API、database、部署平台、打包方式等專業知識。現在有了 ChatGPT Sites，即使你完全不懂這些技術名詞，只要能清楚描述需求，就能只靠手機產出一個實際可玩、而且架構完整的網頁遊戲。
這一次，我只用手機版 ChatGPT 和 Sites，就完成並公開發布了一款手機網頁遊戲「森森果實衝刺」。
它不只有遊戲畫面，還有背景音樂、帳號密碼登入、永久保存的最高分、前十名排行榜，以及支撐這些功能的資料庫與 API。
成品可以直接在手機瀏覽器遊玩：
以下索引整理了遊戲從零到完成的六輪對話。點選每一輪的需求，就能直接跳到後面的完整對話。
| 輪次 | 我做了什麼 | ChatGPT 處理時間 | 完成內容 |
|---|---|---|---|
| 1 | 提出遊戲想法 | 9 分 2 秒 | 完成可玩的手機版小精靈遊戲 |
| 2 | 要求公開網站 | 43 秒 | 設為公開，任何取得連結的人都能遊玩 |
| 3 | 要求加入音樂 | 3 分 39 秒 | 完成音樂功能並通過建置檢查 |
| 4 | 詢問帳號密碼與排行榜 | 2 分 33 秒 | 說明登入方案與技術取捨 |
| 5 | 選擇製作簡易版 | 4 分 10 秒 | 完成帳號密碼登入、資料庫與排行榜 |
| 6 | 修改觸控操作 | 3 分 39 秒 | 改成拖曳角色 |
| 合計 | 六輪需求 | 23 分 46 秒 | 從零完成並持續更新遊戲 |
真正值得記錄的，是這次我和 ChatGPT 的完整對話。
這段對話裡沒有複雜的提示詞，也沒有難懂的專有名詞；我不需要一開始就把所有細節想好，只要有一個想法、把需求具體說出來，再和 AI 一輪一輪協作，就能讓遊戲逐步成形。
第一次對話：先做出可以玩的遊戲
我：
@Sites 幫我建立一個小精靈遊戲網站，適合手機遊玩
ChatGPT：
處理時間為 9m 2s
已完成手機版小精靈遊戲「森森果實衝刺」：
- 接住星果、避開黑霧
- 生命、得分、連擊與最高紀錄
- 手機長按左右按鈕操作
- 桌機支援方向鍵
- 響應式直式遊戲畫面
我沒有先指定前端框架、資料結構、動畫迴圈或碰撞演算法，只描述了想做一個適合手機的小精靈遊戲。
ChatGPT 便先把想法轉成一個可以玩的最小版本，包含核心玩法、得分、生命、連擊、最高紀錄和手機操作。
第二次對話：一句話公開發布
我：
幫我把網站設成公開狀態。
ChatGPT：
處理時間為 43s
網站已設為公開，任何取得連結的人都能遊玩
這一步看起來很簡單，但它代表「做出來」和「可以分享」被放進同一個工作流程裡。
我不需要另外研究部署設定、網域或公開權限，只要直接說明期望的結果。
第三次對話：加入音樂
我：
加入音樂
ChatGPT：
處理時間為 3m 39s
音樂功能已完成並通過建置檢查。由於網站目前是公開的，更新會直接影響所有訪客。
這次我甚至沒有描述音樂類型、播放按鈕或檔案格式，只提出「加入音樂」這個需求。
ChatGPT 完成修改後，也提醒我目前網站已經公開，之後的更新會直接影響所有訪客。這種提醒很重要，因為公開網站和本機草稿不同，每一次修改都可能是正式版本的變更。
第四次對話：帳號密碼與排行榜，先討論方案
我：
我想加入帳號密碼登入以及排行榜功能
ChatGPT：
處理時間為 2m 33s
可以加入，但登入方式需要你先選擇：
使用 ChatGPT 登入（建議）：不必管理密碼，登入後可記錄玩家名稱與分數；排行榜永久保存。
Email＋密碼登入：需要連接 Supabase Auth，玩家可自行註冊帳號，但必須先建立或提供 Supabase 專案。
你想採用哪一種？
這裡出現了和前面不同的情況。
當需求涉及登入、密碼和永久保存的資料時，ChatGPT 沒有直接假裝兩種方案都一樣簡單，而是先把選項、依賴條件和取捨說清楚，請我做決定。
第五次對話：確認可以自行建立帳號資料庫
我：
你不能自己做帳號密碼的資料庫紀錄嗎
ChatGPT：
可以，技術上能用網站的 D1 資料庫自行建立：
- 帳號資料
- 加鹽雜湊後的密碼（絕不儲存明文）
- 安全登入 Session／HttpOnly Cookie
- 每位玩家的最高分與排行榜
但自行管理密碼也代表要處理暴力破解、Session 竊取、忘記密碼、帳號枚舉等安全問題。這個平台建議使用 ChatGPT 登入或專業驗證服務，而不是自行建立公開密碼系統。
如果你接受「第一版沒有 Email 驗證與忘記密碼功能」，我可以製作安全的簡易帳號密碼登入＋排行榜。請回覆「做簡易版」即可。
我：
做簡易版
ChatGPT：
處理時間為 4m 10s
簡易版帳號密碼登入與排行榜已完成並通過建置檢查，包含：
- 密碼加鹽雜湊保存
- 安全登入 Cookie
- 連續登入失敗暫時鎖定
- 個人最高分永久保存
- 公開前十名排行榜
- 手機版登入、註冊及排行榜介面
這一段是整個流程的關鍵。
我沒有寫資料表，也沒有自己設計註冊 API、Session 或排行榜查詢；我只確認接受第一版的範圍限制，ChatGPT 便完成了帳號、密碼、資料庫與排行榜功能。
同時，這也清楚說明「不用寫程式碼」不等於「不用理解安全」。這次是展示與小型遊戲使用的簡易版本，沒有 Email 驗證與忘記密碼功能。如果要做正式商業產品，仍應優先採用成熟的身分驗證服務，並補上更完整的稽核、監控與防濫用措施。
第六次對話：按照實際手感修改操作
第一版使用手機長按左右按鈕。實際玩過之後，我覺得直接用手指控制角色更自然，因此提出：
我：
操控方式改為直接用手指觸控角色左右移動
ChatGPT：
處理時間為 3m 39s
已更新完成：
- 按住小精靈即可左右拖曳
- 移除左右操作按鈕
- 保留桌機方向鍵
這次的需求只有一句話，但它不是憑空提出的規格，而是實際玩過第一版後的回饋。
我不需要知道觸控事件、拖曳座標、邊界限制或按鈕元件該怎麼刪除，只要說明「現在怎麼操作」以及「希望改成什麼樣子」。
AI 到底花了多少時間？
我總共只輸入了六次需求。ChatGPT 每次負責實作、建置、部署或修正，整段流程的處理時間合計 23 分 46 秒。
六輪對話的明細已整理在文章開頭的索引表，讀者可以從任一輪直接跳到對應章節。
也就是說，從第一句「幫我建立一個小精靈遊戲網站」，到完成公開遊戲、背景音樂、帳號密碼登入、資料庫、API、永久最高分、前十名排行榜和拖曳操作，我實際上只說了幾句話，而 ChatGPT 的處理時間總共是 23 分 46 秒。
這裡的「完成」不是只做出一張漂亮的遊戲畫面，而是包含了：
- 可以在手機上遊玩的遊戲迴圈
- 響應式直式版面
- 背景音樂
- 公開部署
- 帳號註冊與登入
- 密碼加鹽雜湊保存
- 安全登入 Cookie
- 連續登入失敗暫時鎖定
- 個人最高分永久保存
- 公開前十名排行榜
- 手機拖曳操作與桌機方向鍵
這種使用方式，重點不是提示詞多複雜
回頭看完整對話，我使用 ChatGPT 的方式其實很簡單：
- 先說出想做什麼，讓 AI 建立第一版。
- 確認結果後，要求公開發布。
- 想到新功能，就直接提出功能名稱。
- 遇到需要取捨的系統設計，回答 AI 的選擇題。
- 實際玩過後，描述哪裡不順手，要求修改。
我沒有先寫完整規格，也沒有一開始就預測所有可能的需求。整個過程比較像和一位能直接動手實作的團隊成員對話：先做出版本，再根據結果繼續調整。
當然，這不代表所有軟體都能在二十幾分鐘內完成。複雜商業系統仍然需要專業的架構設計、安全審查、測試與長期維運。
但對一款簡單、完整、可分享，而且真的有前端、後端、資料庫與 API 的網頁遊戲來說，門檻已經低到只需要一支手機和一個念頭。
下一次等餐點上桌時，與其滑過幾篇貼文，不如把腦中的遊戲說給 ChatGPT 聽。
也許餐點送到以前，你就已經有一個能分享給朋友玩的網址了。
本文由 GPT-5.6 Luna xhigh協作撰寫