前些時候，看見 Will 保哥的技術交流中心分享「使用 Claude 3.5 Sonnet 快速製作踩地雷遊戲」的介紹，不禁有些訝異，不需要寫程式也能製作遊戲的時代來臨了嗎？於是我嘗試使用 Claude 3.5 Sonnet 來製作膾炙人口的「小朋友下樓梯」遊戲，結果 … 居然成功了，而且效果還不錯！
Claude 3.5 Sonnet 讓 AI 幫你寫程式：國中生都做得到，不用寫任何程式！
有很多人其實還不明白，生成式 AI 到底比起一般的「機器自動化」有哪些不同之處。如果要我用簡單一兩句話來說，就是「可以用說的，來做出電腦工程師才能完成的任務」。雖然以目前來說，應用層面主要集中在軟體應用，但是也足夠驚世駭俗了。
試玩小朋友下樓梯 AI 版：滑到最底下或直接點擊
在這個過程當中，我不需要懂任何語法，只需要將我想要的遊戲內容敘述出來，然後就讓 AI 自動幫你產生原始碼。為了方便在網頁上展示，所以我請 AI 使用 Javascript（JS）來製作遊戲。
是的，就是這麼簡單，下面我簡單說明一下做法，你自己也可以去試試看。
Claude 3.5 Sonnet AI 製作遊戲教學
如果你有興趣，你也可以自己嘗試讓 AI 幫你製作看看小遊戲，目前我確定「踩地雷」以及「小朋友下樓梯」都可以透過 Claude 3.5 Sonnet 來簡單實現。當然，畫風是最陽春的那種，但是你一玩就會上手。
- 第一步：前往創建一個 Claude.ai 的帳號
經過測試，Claude 在第一時間生成的 Javascript 原始碼是正確率最高的（ChatGPT、Gemini 都有比較高的機率原始碼有問題，無法直接使用），因此我這邊也以 Claude 為例。至於如何創建帳號，這我就不教了，自己按照指示操作即可。
- 第二步：輸入你想要創建的內容或遊戲
如果你希望可以簡單的在網頁上執行，可以像我一樣直接指定「要在網頁使用、使用 JS 來實現」。輸入之後，Claude 就會按照你的要求生成原始碼，你的要求可以詳細一點沒關係。
- 第三步：複製 Claude 幫你生成的原始碼，拿到 JSBin（或類似服務）測試
使用 JS 來製作網頁版的應用，最方便的地方就是可以在網頁上快速測試能否順利執行。Claude 有可能直接提供給你一組 HTML 原始碼，裏面已經包含了完整的 Javascript、CSS，也可能會分開提供，其實不管是哪一種都是一樣的意思，它給你什麼，你就複製貼上到指定欄位即可：
- 第四步：看右側「Output」遊戲是否成功執行
其實到這邊，你已經做完了！最右側的 Output 區塊，會即時顯示出你剛剛輸入的內容是否正確。如果無法正確顯示，那可能就是失敗了，你可以請 AI 修正看看，或是乾脆換一款遊戲請它生成。如果成功了，你可以直接在頁面上遊玩，甚至針對不足之處請 AI 幫你做出修改。
例如，第一版的「小朋友下樓梯」上方是沒有鋸齒的，我想要增加難度，讓玩家碰到上面或下面都會死掉，於是特地請 AI 幫我修改。由於 Claude 3.5 Sonnet 的免費額度比較容易碰到上限，所以我在修改原始碼的部分，很多時候是請 Google Gemini 或是 ChatGPT 幫我修。
在修改原始碼這部分，各大 AI 服務效果其實差不多，沒有像從頭創建一個全新的遊戲差距那麼大。
將透過 Claude 3.5 Sonnet 製作的遊戲放上網頁
於是，我的小遊戲就完成了！我甚至成功的放上《科技人》讓大家可以直接遊玩。有一個小插曲，我一開始直接放到 WordPress 平台上的時候，是無法正確執行的。由於我不是工程師，要尋找錯誤原因並不容易，這時候我連「如何找出問題點」都請 AI 教我。
最後我們（對，我們，我跟 AI 一邊嘗試一邊持續溝通，它幫我找原因，我來一個一個試錯）成功找到了問題點：Wordpress 誤判了「&&」，將它轉譯成錯誤的內容。
我按照 AI 的建議，將原始碼重新打包成一個獨立的 JS 文件，透過「Simple Custom CSS and JS」這個外掛來將 JS 存成獨立的檔案（CSS、HTML 也可以），然後重新上傳就順利執行了。
下面就是實際遊玩的體驗，如果你是使用電腦觀看這個頁面，可以使用「⬅」、「⮕」方向鍵來控制方向；如果你是使用手機觀看這個頁面，可以觸碰遊戲的左半邊或右半邊來控制方向。
值得一提的是，為了讓手機也可以玩，我詢問 ChatGPT 如何修改語法，想不到簡單加幾行原始碼輕鬆就實現了。
試試看吧！AI 真的潛力無窮，我甚至感覺「現在只是剛開始」而已；不會操作的人其實也不用緊張，我相信不用多久，AI 就能直接幫你完成了，從「教學」到「執行」只剩下最後一里路。
Claude 3.5 Sonnet 製作的小朋友下樓梯遊戲試玩
操控方式：
- 電腦版：使用「⬅」、「⮕」方向鍵來控制方向
- 手機版：觸碰遊戲的左半邊或右半邊來控制方向
更新日誌：
- 新增「上方鋸齒」，觸之即死
- 修改元素色碼，與網站更搭
- 新增速度選項，越高分速度越快，增加刺激度
- 新增黑子，會主動干擾玩家，增加難度
公開留言