小工具AIAI 應用案例小遊戲教學產業

Claude 製作遊戲教學:小朋友下樓梯,只需要 30 秒|AI 應用案例

Claude 製作遊戲教學:小朋友下樓梯,只需要 30 秒|AI 應用案例 Claude 製作遊戲教學 微軟, AI, Edge, 產業

前些時候,看見 Will 保哥的技術交流中心分享「使用 Claude 3.5 Sonnet 快速製作踩地雷遊戲」的介紹,不禁有些訝異,不需要寫程式也能製作遊戲的時代來臨了嗎?於是我嘗試使用 Claude 3.5 Sonnet 來製作膾炙人口的「小朋友下樓梯」遊戲,結果 … 居然成功了,而且效果還不錯!

Claude 3.5 Sonnet 讓 AI 幫你寫程式:國中生都做得到,不用寫任何程式!

有很多人其實還不明白,生成式 AI 到底比起一般的「機器自動化」有哪些不同之處。如果要我用簡單一兩句話來說,就是「可以用說的,來做出電腦工程師才能完成的任務」。雖然以目前來說,應用層面主要集中在軟體應用,但是也足夠驚世駭俗了。

Claude 製作遊戲教學:小朋友下樓梯,只需要 30 秒|AI 應用案例 Claude 製作遊戲教學 微軟, AI, Edge, 產業

試玩小朋友下樓梯 AI 版:滑到最底下或直接點擊

在這個過程當中,我不需要懂任何語法,只需要將我想要的遊戲內容敘述出來,然後就讓 AI 自動幫你產生原始碼。為了方便在網頁上展示,所以我請 AI 使用 Javascript(JS)來製作遊戲。

Claude 製作遊戲教學:小朋友下樓梯,只需要 30 秒|AI 應用案例 Claude 製作遊戲教學 微軟, AI, Edge, 產業

是的,就是這麼簡單,下面我簡單說明一下做法,你自己也可以去試試看。

Claude 3.5 Sonnet AI 製作遊戲教學

如果你有興趣,你也可以自己嘗試讓 AI 幫你製作看看小遊戲,目前我確定「踩地雷」以及「小朋友下樓梯」都可以透過 Claude 3.5 Sonnet 來簡單實現。當然,畫風是最陽春的那種,但是你一玩就會上手。

  • 第一步:前往創建一個 Claude.ai 的帳號

經過測試,Claude 在第一時間生成的 Javascript 原始碼是正確率最高的(ChatGPT、Gemini 都有比較高的機率原始碼有問題,無法直接使用),因此我這邊也以 Claude 為例。至於如何創建帳號,這我就不教了,自己按照指示操作即可。

Claude 製作遊戲教學:小朋友下樓梯,只需要 30 秒|AI 應用案例 Claude 製作遊戲教學 微軟, AI, Edge, 產業
  • 第二步:輸入你想要創建的內容或遊戲

如果你希望可以簡單的在網頁上執行,可以像我一樣直接指定「要在網頁使用、使用 JS 來實現」。輸入之後,Claude 就會按照你的要求生成原始碼,你的要求可以詳細一點沒關係。

Claude 製作遊戲教學:小朋友下樓梯,只需要 30 秒|AI 應用案例 Claude 製作遊戲教學 微軟, AI, Edge, 產業
  • 第三步:複製 Claude 幫你生成的原始碼,拿到 JSBin(或類似服務)測試

使用 JS 來製作網頁版的應用,最方便的地方就是可以在網頁上快速測試能否順利執行。Claude 有可能直接提供給你一組 HTML 原始碼,裏面已經包含了完整的 Javascript、CSS,也可能會分開提供,其實不管是哪一種都是一樣的意思,它給你什麼,你就複製貼上到指定欄位即可:

Claude 製作遊戲教學:小朋友下樓梯,只需要 30 秒|AI 應用案例 Claude 製作遊戲教學 微軟, AI, Edge, 產業
  • 第四步:看右側「Output」遊戲是否成功執行

其實到這邊,你已經做完了!最右側的 Output 區塊,會即時顯示出你剛剛輸入的內容是否正確。如果無法正確顯示,那可能就是失敗了,你可以請 AI 修正看看,或是乾脆換一款遊戲請它生成。如果成功了,你可以直接在頁面上遊玩,甚至針對不足之處請 AI 幫你做出修改。

Claude 製作遊戲教學:小朋友下樓梯,只需要 30 秒|AI 應用案例 Claude 製作遊戲教學 微軟, AI, Edge, 產業

例如,第一版的「小朋友下樓梯」上方是沒有鋸齒的,我想要增加難度,讓玩家碰到上面或下面都會死掉,於是特地請 AI 幫我修改。由於 Claude 3.5 Sonnet 的免費額度比較容易碰到上限,所以我在修改原始碼的部分,很多時候是請 Google Gemini 或是 ChatGPT 幫我修。

在修改原始碼這部分,各大 AI 服務效果其實差不多,沒有像從頭創建一個全新的遊戲差距那麼大。

Claude 製作遊戲教學:小朋友下樓梯,只需要 30 秒|AI 應用案例 Claude 製作遊戲教學 微軟, AI, Edge, 產業

將透過 Claude 3.5 Sonnet 製作的遊戲放上網頁

於是,我的小遊戲就完成了!我甚至成功的放上《科技人》讓大家可以直接遊玩。有一個小插曲,我一開始直接放到 WordPress 平台上的時候,是無法正確執行的。由於我不是工程師,要尋找錯誤原因並不容易,這時候我連「如何找出問題點」都請 AI 教我。

最後我們(對,我們,我跟 AI 一邊嘗試一邊持續溝通,它幫我找原因,我來一個一個試錯)成功找到了問題點:Wordpress 誤判了「&&」,將它轉譯成錯誤的內容。

我按照 AI 的建議,將原始碼重新打包成一個獨立的 JS 文件,透過「Simple Custom CSS and JS」這個外掛來將 JS 存成獨立的檔案(CSS、HTML 也可以),然後重新上傳就順利執行了。

Claude 製作遊戲教學:小朋友下樓梯,只需要 30 秒|AI 應用案例 Claude 製作遊戲教學 微軟, AI, Edge, 產業

下面就是實際遊玩的體驗,如果你是使用電腦觀看這個頁面,可以使用「⬅」、「⮕」方向鍵來控制方向;如果你是使用手機觀看這個頁面,可以觸碰遊戲的左半邊或右半邊來控制方向。

值得一提的是,為了讓手機也可以玩,我詢問 ChatGPT 如何修改語法,想不到簡單加幾行原始碼輕鬆就實現了。

Claude 製作遊戲教學:小朋友下樓梯,只需要 30 秒|AI 應用案例 Claude 製作遊戲教學 微軟, AI, Edge, 產業

試試看吧!AI 真的潛力無窮,我甚至感覺「現在只是剛開始」而已;不會操作的人其實也不用緊張,我相信不用多久,AI 就能直接幫你完成了,從「教學」到「執行」只剩下最後一里路。

Claude 3.5 Sonnet 製作的小朋友下樓梯遊戲試玩

操控方式:
  • 電腦版:使用「⬅」、「⮕」方向鍵來控制方向
  • 手機版:觸碰遊戲的左半邊或右半邊來控制方向
更新日誌:

- 新增「上方鋸齒」,觸之即死
- 修改元素色碼,與網站更搭
- 新增速度選項,越高分速度越快,增加刺激度
- 新增黑子,會主動干擾玩家,增加難度
Written by
黃郁棋

《科技人》站長,在科技業打滾十年的老屁股,每天都覺得自己要被新技術取代了,完了完了。

公開留言

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

打賞科技人|祝您有個美好的一天:)