我在這篇文章中，分享如何藉由線上程式編輯平台Replit的AI助手，不用自己寫程式，也能製作出一個結合天文與數學學習的密室逃脫網頁小遊戲。你們對哪些天文主題感到好奇呢？想要將它們連結到哪些學科領域呢？數學？文學？物理學？社會學？生物學？程式開發？遊戲製作？外語學習？…歡迎在「與AI探索天文」FB粉絲專頁或我的Threads留言分享你們的想法。
你閱讀著《資料視覺化：用Python為星空作畫》的4.2節，置身於《獵星者旅店》遊戲世界中。眼前的心跳天文學社長莫妮卡正在教你用Python探索星體有多遠，她提到量測星體距離的「視差法」，以及基於這種方法所定義的距離單位「秒差距」。就在她問你是否有疑問時，遊戲畫面跳出了幾個選項，其中一個是：「詢問莫妮卡如何用三角函數算出1個秒差距是多少個天文單位」。
你闔上書，腦中浮現去年在臺北天文館參加的一場演講：「歡迎來到《獵星者旅店》，用AI生成屬於你的天文探索故事」。講者透過密室逃脫遊戲《逃出天文鎖》，分享AI如何協助大眾取得開放的天文觀測資料，並創造出專屬的天文探索旅程。你心想：我是否也能利用AI工具，打造一款結合天文與數學學習的密室逃脫網頁遊戲呢？
你接著打開筆電，瀏覽「與AI探索天文」FB粉絲專頁中的兩篇文章：「如何用ChatGPT製作一個網頁小遊戲來認識找尋系外行星的方法？」和「如何用Claude製作一個能邊塗鴉邊認識多波段天文觀測的網頁小遊戲？」，並嘗試跟著實作。但你發現，這兩個平台目前僅能產出單一檔案的網頁，對於想製作稍微複雜一點的遊戲來說仍有侷限。
於是你向筆電視窗中的我問道：「有沒有什麼線上程式編輯平台，能結合AI工具來幫助我製作網頁小遊戲？」
我回答：「你可以試試Replit。它內建AI助手Replit Agent，能依照你的遊戲構想與需求，協助你規劃功能、建立專案架構、撰寫程式碼、進行測試除錯，並將成品部署上網。我已幫你開啟Replit網站並完成註冊登入，現在首頁上就能看到與Replit Agent的對話框，輸入你的構想後按『Start building』，它就會開始協助你製作遊戲。那麼，你想打造什麼樣的網頁遊戲呢？」
你思考了一下，然後輸入：我想製作一個簡單的密室逃脫網頁遊戲，以2D奇幻RPG的形式呈現。目標玩家是剛開始學習天文及三角函數的中學生。遊戲的核心目標是透過在密室中探索及解謎，讓玩家逐步了解測量星體距離的視差法，以及相關的三角函數基礎知識。遊戲界面語言是台灣繁體中文，劇情與互動過程應避免教師講解式的對話風格。
Replit Agent開始規劃這個遊戲，並提出了一些額外功能的建議，等待你確認。由於你希望先維持簡單的版本，因此暫時不勾選其他附加功能，直接點擊「Approve plan & start」。
接著，Replit Agent開始撰寫程式。過程中若遇到問題，它會自動進行測試並嘗試解決。最終，一個遊戲預覽畫面出現在螢幕上，等你操作測試，確認遊戲流程是否順利。
你試玩了一遍後，發現仍有不少需要改進的地方，於是向Replit Agent下達更進一步的指示：「目前只是跟物品互動後跳出視窗輸入答案，很無聊像在考試，應該要在遊戲過程中探索，逐漸認識與視差法相關的天文知識及三角函數概念，最後到出口解謎時會運用探索到的知識。另外，目前版本缺乏奇幻風格RPG的遊戲情境，請優化。」
於是，你就這樣持續指示Replit Agent優化遊戲內容，並請它修正程式錯誤，例如：
「請於遊戲開頭頁面進行以下調整：
- 角色命名：移除玩家自行輸入名字的功能，改為在遊戲中自動提供一個奇幻風格的角色名稱。
- 按鈕文字修改：將『開始冒險』按鈕更名為『進入密室』。
- 遊戲名稱與描述：將遊戲名稱改為『逃出天文鎖』，並同步更新該頁面所有相關描述內容。
- 儲存功能移除：移除『繼續冒險』按鈕，並取消遊戲的儲存與載入功能。」
又如：
- 「目前玩家透過物品互動所獲得的天文與三角函數知識，對初學的中學生而言還是太深。請調整現有物品所傳達的知識深度，並增加更多互動物件，引導玩家循序漸進地理解基礎概念。」
- 「在首頁加上版權宣言」
- 「這張遊戲畫面截圖只顯示三個能探索的物品，但應該要五個，請修正。」
......等等。
最終，你完成一個自己還算滿意的版本，並依照我的指引，點擊右上角的「Deploy」按鈕，產生遊戲的網頁連結分享給別人：https://astro-escape-room-parallax-v1-yihaosu.replit.app/
此篇文是由蘇羿豪經ChatGPT和Replit協助創作，文章以「創用CC姓名標示─非商業性 4.0(CC BY-NC 4.0) 國際版授權條款」釋出。歡迎分享並追蹤「與AI探索天文」FB粉絲專頁或我的Threads。
