摘要

這篇用《午夜沙丁魚》示範如何把一個遊戲點子交給 Codex，做成可在瀏覽器操作的 3D 小品。從設定角色與目標、製作第一個關卡，到補上互動提示、警衛反應與重玩機制，文中提供可直接改寫的提示詞，也介紹這次成品的玩法。讀完可以先做一關，再依試玩結果繼續修改。

引言

兩位浣熊搭檔被關在博物館裡，北側展櫃放著一條金色沙丁魚。你要避開警衛的視線，救出夥伴，合作拿到魚，再帶全員回到出口。魚到手後，巡邏路線會改變，剛才走得過去的路，還適合拿來撤離嗎？

我把這個方向交給 Codex，先做出能移動、救援與撤離的初版，接著檢查玩家是否看得懂目標，按下按鍵後又能不能知道發生了什麼。上一篇把照片延伸成海報，今天往前走一步，讓別人親手操作我們的想法。遊戲點子要落地，先寫清楚玩家能做什麼。

封面為概念插畫，下面的場景與操作畫面來自本次實作。

一、先看懂玩法，把點子縮成一個關卡

這次參考 Simon Willison 的浣熊大盜製作紀錄，取用浣熊團隊與博物館任務的方向，重新實作《午夜沙丁魚》。我們的角色、展台與場景由程式畫出，起手材料是一份玩法設定；第一輪就先把救援、取魚、撤離串起來。

先看這支一分鐘玩法介紹，跟著浣熊從救援走到撤離：按 E 開鎖後，搭檔會沿路跟上；找齊兩位，大家就疊高取魚；最後抱著沙丁魚，等全員一起抵達出口。

用手機閱讀，也可以先看30 秒直式精華，再回來照下面的步驟製作自己的第一關。

影片錄下本次遊戲引擎實際運作的畫面，以已驗證的方向輸入路線重播，片中標示「實際引擎重播示範」。

圖一　依實作截圖製作的玩法說明圖。先救兩側搭檔，再到展櫃取魚，最後回到綠色出口。

在第一關，你控制的是帶隊浣熊。靠近籠子按 E，開鎖完成後，搭檔會跟著走；找齊兩位搭檔，才能合作取得沙丁魚。警衛的視線區域會隨巡邏轉動，被看見時警戒上升，離開視線後下降。警戒滿了會失敗，取得目標並帶隊抵達出口才算成功。

目前版本有三關，後面會換動線，加入交替開關的光閘。紀念幣是額外挑戰，玩家可以先通關，再試著全收集或零察覺撤離，拿到更高星等。讀者重做時，先完成第一關就好，讓朋友確實能從開始玩到結束，再考慮增加內容。

第一次準備自己的點子，可以先填一句話。「玩家是＿＿，要完成＿＿；他能＿＿，但會遇到＿＿，成功時看到＿＿。」這次填進去的，就是帶隊浣熊、救援與撤離、移動和互動，以及巡邏警衛。這句話會讓 AI 知道該做哪些行為，也讓你有地方開始驗收。

二、把玩法交給 Codex，先拿到能操作的第一版

建立一個空資料夾，讓 Codex 在裡面工作。先告訴它要交付瀏覽器遊戲與本機預覽，讓它檢查目前能用的工具。這次用 Three.js 畫出 3D 場景，模型由幾何形狀組成，因此第一版可以從玩法文字開始，不必先蒐集整套角色素材。

下面依本次起手需求整理，讀者可以直接貼入，再替換角色、目標與場景。第一輪的範圍刻意只留一關，先確認角色能走、互動能成功，以及遊戲真的有結局。

請在目前資料夾製作一款繁體中文 3D 瀏覽器遊戲，
名稱是《午夜沙丁魚》。

玩家是一隻浣熊，要在夜間博物館救出左右兩側
的兩位搭檔。找齊搭檔後，才能取得北側展櫃裡
的金色沙丁魚，再返回南側綠色出口。

先檢查目前環境能否建立本機預覽並操作瀏覽器。
使用現有工具；缺少項目時，先說明需要補什麼。
以 Three.js 繪製場景，角色與物件先用幾何形狀製作。
不需要登入、後端或付費圖片 API。

第一版只做一個完整關卡。
支援 WASD／方向鍵移動，E 互動、Shift 短暫衝刺。
警衛沿固定路線巡邏，被視線照到時逐漸提高警戒，
離開視線後下降；警戒滿時失敗，可以重新開始。

救出搭檔後讓它跟隨玩家，未找齊時不能取魚。
只有取得沙丁魚並帶隊回到出口，才算成功。
採用夜間青綠與暖金配色，文字與按鈕清楚可讀。

完成後提供可玩的本機預覽與製作檔，
實際檢查移動、救援、取魚限制、撤離和重玩。
這一輪先在本機製作，不發布。

這一步應拿到一個可以開啟的預覽，並能用按鍵完成任務。先試移動，再找一個籠子互動，最後走到結局。若只拿到場景圖片，就請 Codex 補上可執行的遊戲與預覽方式；若畫面能動卻沒有成功或失敗條件，先把這兩個結局補齊。

試玩時記下具體位置與動作，例如靠近籠子後按 E 沒有反應，或還沒救人就能拿走魚。這些描述能讓下一輪修改對準問題，比一句「再好玩一點」容易處理。

三、補上目標、操作與回饋，讓玩家願意繼續玩

初版已能走完任務，但操作與回饋還有空缺。站得多近才能開鎖，玩家需要自己猜；救出搭檔後雖然進度增加，畫面也需要更明顯的變化。接著我們把靠近目標時的提示、開鎖進度與音效加進去，讓玩家知道按下按鍵後正在發生什麼。

圖二　實際遊戲畫面。上方顯示任務與警戒，下方有互動、衝刺、慢走與口哨；低姿慢走時，角色姿態與視線提示會跟著改變。

這次也遇到一個容易漏掉的設計問題。慢走最初只讓角色減速，沒有帶來潛行優勢，玩家就缺少使用它的理由。後來補上低姿態降低遠距離察覺範圍，衝刺則可能引來警衛，兩種操作才有了取捨。拿到魚後再改變巡邏，玩家也需要重新選擇撤離路線。

你可以用下面這段指令，檢視自己的第一版。這是依本次修改過程整理的第二階段要求。

請檢查目前遊戲的目標、操作與回饋。
先指出玩家可能看不懂或沒有取捨的地方，再修改。

靠近可互動物件時，顯示就地提示與明顯標記。
開鎖與取魚要有進度；移動時取消，並告知原因。
成功救援、取得物品與遇到危險時，
給清楚的畫面變化與適度音效。

讓衝刺、慢走與口哨各有用途與代價。
低姿慢走較難被遠處察覺，但速度降低；
衝刺可能出聲，口哨次數有限，能引來附近警衛。
視線圖形與提示必須符合實際判定。

取魚後改變巡邏，讓玩家重新決定撤離路線。
確認開場有安全的閱讀時間，警衛不與玩家重疊。
保留第一關規則，逐項修改，再讓我試玩。

修改後，先檢查剛才指出的問題是否消失，再試附近的操作。新增慢走，就比較一般移動與低姿的差異；調整警戒，就觀察被看見、找到掩護與離開視線的過程。每加一個按鍵，都要回答它讓玩家多了什麼選擇。

四、走完關卡，再把作品交給朋友試玩

功能加上去之後，還要檢查規則是否公平。本次路線模擬曾出現警衛反應太快、帶隊繞行容易失敗的情況；檢查起點時，也找到第三關警衛與玩家重疊的問題。我們調整反應時間與起始位置，再驗證各關卡可以完成。

目前規則測試涵蓋開鎖取消、取魚限制與勝負判定，也用正式遊戲引擎的方向輸入模擬，找出三關皆可全收集、零察覺撤離的路線。這些測試能檢查規則與可達性；畫面是否看得懂、玩家是否想重玩，仍要讓人拿到作品後實際操作。

圖三　窄螢幕排版預覽。方向與動作按鈕要能按到，提示也不能擋住玩家。

把最後一輪要求交給 Codex，讓它從頭檢查，再整理分享檔案。

請驗收目前遊戲，保留現有玩法。

檢查未救齊搭檔時不能取魚、警戒滿時會失敗，
以及隊伍真正抵達出口後才成功。
確認失敗與重玩能清除舊狀態，暫停後角色不繼續移動。
若警戒滿與到達出口同時發生，明確處理結果優先順序。

實際操作代表性路線，另外檢查每關是否存在
全收集與零察覺的完成路線。
區分規則測試、路線模擬與瀏覽器實際操作的結果。

檢查窄螢幕的文字、提示與觸控按鈕，
讓主要操作區至少約 44×44 像素，避免超出畫面。

交付製作檔與清楚的開啟方式，
再整理成朋友能試玩的完整檔案或單一 HTML。
保留必要套件授權，檢查交付檔能否開啟，
列出仍需由接收者確認的相容性問題。
先交付檔案，不代為公開發布。

分享前，留意本機預覽網址只連到自己的電腦。要讓朋友玩，得交付完整檔案，或另外放到他們能開啟的網站。這次已整理單一 HTML 試玩包，接下來會請幾位休閒玩家試玩，記錄他們卡住的位置，以及是否自發再玩一次。

看回饋時，先問對方當時想做什麼。玩家找不到籠子，就修目標引導；知道位置卻按不動，就檢查互動範圍；任務完成後沒有再玩的動機，再考慮關卡變化與額外挑戰。先處理看得見的問題，讓每一輪修改有依據。

結論

這次從一份浣熊救援設定開始，先做出能走完的關卡，再補上操作提示與潛行取捨。Codex 接手程式與場景製作，我們用試玩結果決定下一步改什麼。

如果你也有一個遊戲點子，先填好「角色、目標、可做的動作、阻礙與成功結果」，再貼入第二章的指令，完成第一關。讓朋友玩到你的點子，從一個能開始、能操作、能結束的關卡做起。