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

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

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

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

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

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

raw-image
raw-image


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


raw-image


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


raw-image


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


raw-image
raw-image


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

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


raw-image


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

最後,你完成一個能讓小學生了解如何找系外行星的網頁小遊戲,並產生網頁連結分享給學生: https://chatgpt.com/canvas/shared/680736edb35c8191b76332e7fe408563


raw-image


此篇文是由蘇羿豪經ChatGPT協助創作,文章以「創用CC姓名標示─非商業性 4.0(CC BY-NC 4.0) 國際版授權條款」釋出。歡迎分享並追蹤「與AI探索天文」FB粉絲專頁或我的Threads
留言
avatar-img
留言分享你的想法!
avatar-img
與AI探索天文
1會員
11內容數
為了延伸並實踐《資料視覺化:用Python為星空作畫》書中「與AI探索天文」的想法,我會在這分享如何運用各種AI工具,來探究你我好奇的天文主題、將它連結到其它學科領域,並結合相關開放資料,打造有趣的天文應用程式與遊戲。我希望藉由這些分享,讓每個人都可以與AI創造出專屬自己的天文探索故事,拉近你們與星空的距離。
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
當你邊吃粽子邊看龍舟競賽直播的時候,可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢? 本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章,你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!
Thumbnail
當你邊吃粽子邊看龍舟競賽直播的時候,可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢? 本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章,你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!
Thumbnail
今天又發現ChatGPT的一些缺點, 使用時需要很準確的提供你想要表達的文字(我覺得還蠻重要的) 又或者拿一些範例給它看, 它就能更準確的回答問題, 因為今天我發現有一篇文章和之前寫過的完全一樣了, 所以又要再請ChatGPT生成30則勵志英文短文, 結果之前發問的問題已經消失了, 又
Thumbnail
今天又發現ChatGPT的一些缺點, 使用時需要很準確的提供你想要表達的文字(我覺得還蠻重要的) 又或者拿一些範例給它看, 它就能更準確的回答問題, 因為今天我發現有一篇文章和之前寫過的完全一樣了, 所以又要再請ChatGPT生成30則勵志英文短文, 結果之前發問的問題已經消失了, 又
Thumbnail
喜歡我和ChatGPT一起完成的小說作品請幫我按愛心,照理說我也是小說的創作者GPT是我的助力,我有提供內容GPT提供他想要自己呈現的內容,所以說我是他的老闆GPT是我底層的員工
Thumbnail
喜歡我和ChatGPT一起完成的小說作品請幫我按愛心,照理說我也是小說的創作者GPT是我的助力,我有提供內容GPT提供他想要自己呈現的內容,所以說我是他的老闆GPT是我底層的員工
Thumbnail
這篇文章介紹了如何利用ChatGPT在偏鄉教育中提升教學效率。我們利用ChatGPT從繁雜的簡報中提取重點,創作適合小朋友的故事和教案。孩子們通過互動和說故事技巧,學會導覽景點,了解社區歷史和傳說。AI輔助讓教學準備事半功倍,提供更多創意和互動機會,提升了孩子們的學習興趣和表達能力。
Thumbnail
這篇文章介紹了如何利用ChatGPT在偏鄉教育中提升教學效率。我們利用ChatGPT從繁雜的簡報中提取重點,創作適合小朋友的故事和教案。孩子們通過互動和說故事技巧,學會導覽景點,了解社區歷史和傳說。AI輔助讓教學準備事半功倍,提供更多創意和互動機會,提升了孩子們的學習興趣和表達能力。
Thumbnail
透過玩桌遊的方式學習AI生成圖像技巧,在充滿樂趣的活動中,學會如何操作工具及生成圖像技巧。這款遊戲預計下個月將開設實體課程,適合所有對AI有興趣的人、AI繪圖新手及藝術愛好者。
Thumbnail
透過玩桌遊的方式學習AI生成圖像技巧,在充滿樂趣的活動中,學會如何操作工具及生成圖像技巧。這款遊戲預計下個月將開設實體課程,適合所有對AI有興趣的人、AI繪圖新手及藝術愛好者。
Thumbnail
基於大型語言模型的 AI 聊天服務可以協助完成多項工作,為了提升 AI 聊天的互動便利性,許多開發者打造了不同性質的擴充功能,Ask Screenshot for Gemini 就是一款能快速將網頁文字與截圖傳送至 Gemini 對話框的實用工具。
Thumbnail
基於大型語言模型的 AI 聊天服務可以協助完成多項工作,為了提升 AI 聊天的互動便利性,許多開發者打造了不同性質的擴充功能,Ask Screenshot for Gemini 就是一款能快速將網頁文字與截圖傳送至 Gemini 對話框的實用工具。
Thumbnail
我們人類和ChatGPT的對話技巧也是需要學習的,有鑑於此,我想要一天分享一點「和ChatGPT對話的技術」,並且每篇文章長度控制在三分鐘以內,讓大家不會壓力太大,但是又能夠每天成長一點。 針對Generative AI、Foundation Model、Large Language Mode
Thumbnail
我們人類和ChatGPT的對話技巧也是需要學習的,有鑑於此,我想要一天分享一點「和ChatGPT對話的技術」,並且每篇文章長度控制在三分鐘以內,讓大家不會壓力太大,但是又能夠每天成長一點。 針對Generative AI、Foundation Model、Large Language Mode
Thumbnail
利用AI來輔助學與教,已成為許多教師(甚至學生自己)的新選擇。AI不僅可以作為知識查詢的工具,還能透過互動遊戲的方式,使語文學習變得更加生動有趣。 這次示範採用電話應用程式POE中的chatGPT。 原因是用電話app更有「玩遊戲」的感覺,而且香港暫時未能直接使用OpenAI服務。 成語接龍
Thumbnail
利用AI來輔助學與教,已成為許多教師(甚至學生自己)的新選擇。AI不僅可以作為知識查詢的工具,還能透過互動遊戲的方式,使語文學習變得更加生動有趣。 這次示範採用電話應用程式POE中的chatGPT。 原因是用電話app更有「玩遊戲」的感覺,而且香港暫時未能直接使用OpenAI服務。 成語接龍
Thumbnail
本文介紹了text-generation-webui的安裝方法和模型的選擇,包括模型的下載和擺放位置,並提供了相關的連結和建議。
Thumbnail
本文介紹了text-generation-webui的安裝方法和模型的選擇,包括模型的下載和擺放位置,並提供了相關的連結和建議。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News