Google 最新推出的 Gemini Canvas 介面,是一個極具潛力的 AI 對話式開發平台,非常適合用來與人工智慧互動、協作開發與修改程式碼。在這篇教學文章中,我們將透過 Gemini Canvas 打造一款經典的線上遊戲——2048 數字拼盤遊戲,並一步步帶你了解如何使用 Canvas 的「程式碼」、「預覽」與「分享」模式。此外,我們也會教你如何將專案的 HTML 程式碼下載到本機端,讓你可以直接透過電腦瀏覽器執行遊戲,甚至進行後續的客製化修改。
🔹 什麼是 Google Gemini Canvas?
Gemini Canvas 是 Google 結合人工智慧的開發平台,讓使用者能透過自然語言與 AI 合作編寫、修改及測試程式。與傳統的 IDE(整合開發環境)不同,在 Canvas 模式下,你只要下命令,Gemini 就會幫你完成程式部分,還能即時預覽成果。
這篇教學將涵蓋以下幾個實作重點,讓你從零開始打造並運行自己的 2048 遊戲:
*透過對話與 AI 撰寫 HTML、CSS、JavaScript 程式碼
*使用 Gemini Canvas 的「預覽」功能即時查看遊戲效果
*學會使用「分享」功能,將作品傳送給他人或發佈到網路上
*下載完整 HTML 檔案,在本機電腦的瀏覽器中開啟與執行
參考做法
為了方便和 Gemini 對話而修改程式,所以要先選取:Canvas。
提示詞:做一個2048線上遊戲。
程式產生後會切換至預覽頁面(結果如下),在此,你就可以試玩是否可用。
接著要進行調整,共做了二次。
提示詞:請修改:字體改為Arial,「重新開始」和「復原」的字體放大。
提示詞:請修改:數字的字型改為Arial,「重新開始」和「復原」的字體再放大。
結果如下:
使用「分享」按鈕取得分享連結:https://g.co/gemini/share/5727fc0f9657。
複製連結後,可以直接在線上玩 2048 遊戲。
在程式碼區中可以複製程式碼。
將程式碼貼至記事本中,再另存新檔為附檔名為 html 的檔案,例如:2048.html。
如此,這個 2048.html 檔案即可在電腦的瀏覽器中使用,不必再連線至 Google Gemini 的網址了。