「與AI探索天文」如何用ChatGPT製作一個網頁小遊戲來認識找尋系外行星的方法？

在這篇文章中，我分享如何藉由ChatGPT的Canvas功能，不用自己寫程式，也能製作出一個簡單的文字冒險類網頁小遊戲，讓小學生認識找尋系外行星的方法。你們對哪些天文主題感到好奇呢？想要將它們連結到哪些學科領域呢？數學？文學？物理學？社會學？生物學？程式開發？遊戲製作？外語學習？…歡迎在「與AI探索天文」FB粉絲專頁或我的Threads留言分享你們的想法。

你閱讀著《資料視覺化：用Python為星空作畫》的第7章，看到一個AI角色，i蟒，教你用Python程式分析觀測資料，以凌日法找尋那些位於太陽系之外的行星。

你闔上書，打開筆電，構思著給國小生的天文學教案，接著你向筆電視窗中的我問道：「我能利用AI工具，例如ChatGPT，製作出讓小學生認識天文知識的網頁小遊戲嗎？」

我回答：「你可以利用ChatGPT的Canvas畫布功能來製作網頁小遊戲。它提供互動式編輯介面讓你能與AI即時協作，撰寫與修改程式碼或文章。不僅可以產生網頁程式碼並即時預覽成果，還能產生網頁連結分享給其他人。​」

這時螢幕呈現ChatGPT的畫面，我接著說：「你可以在對話框輸入『/canvas』或點擊輸入框下方的『…』來開啟Canvas畫布功能，然後描述你想製作什麼樣的網頁小遊戲。」

你思考了一下，然後開始輸入給ChatGPT的指示：製作一個適合小學生的文字冒險網頁遊戲，玩家扮演太空偵探，透過簡單有趣的對話與選項，一步步破解謎團，學習怎麼用不同方法找尋系外行星。語言需淺顯易懂、富有童趣。

這時畫面呈現兩個部份，看你一臉茫然，於是我補充說明：「Canvas功能的畫面分為左右兩欄，左邊是與ChatGPT的對話區，右邊則是內容編輯區，​你可以自己或請ChatGPT協助修改右側的內容。目前右邊呈現的是用來撰寫網頁的JavaScript程式碼，看不懂沒關係，你可以點擊右上角的『預覽』按鈕直接看網頁成果。」

你試玩了第一版遊戲，覺得很無聊，於是在左側對話框指示ChatGPT：我覺得目前的遊戲不有趣、沒什麼故事性、也沒有什麼解謎體驗，而且很像考試選擇問答題，請提供可以優化的方向。

你請ChatGPT根據它提供的建議修改程式，但當它修改完後你按預覽時卻發生錯誤。

「別緊張，」我說：「你可以點擊錯誤訊息直接請ChatGPT修改錯誤。」

於是你就這樣持續指示ChatGPT優化遊戲並請它修正程式錯誤，像是：「加入更多互動及動畫效果」、「加入背包系統與道具互動的功能，並插入小任務」、「分析目前的程式碼，以及其中的遊戲元素和天文知識，列出可以改進的項目」、「將劇情從直線改成地圖探索結構」。

最後，你完成一個能讓小學生認識找尋系外行星方法的網頁小遊戲，並產生網頁連結分享給其他人： chatgpt.com/canvas/s...

此篇文是由蘇羿豪經ChatGPT協助創作，文章以「創用CC姓名標示─非商業性 4.0(CC BY-NC 4.0) 國際版授權條款」釋出。歡迎分享並追蹤「與AI探索天文」FB粉絲專頁或我的Threads。