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 檔案,在本機電腦的瀏覽器中開啟與執行

利用Google Gemini Canvas打造2048遊戲

 

參考做法

為了方便和 Gemini 對話而修改程式,所以要先選取:Canvas。

提示詞:做一個2048線上遊戲。

利用Google Gemini Canvas打造2048遊戲

程式產生後會切換至預覽頁面(結果如下),在此,你就可以試玩是否可用。

利用Google Gemini Canvas打造2048遊戲

接著要進行調整,共做了二次。

提示詞:請修改:字體改為Arial,「重新開始」和「復原」的字體放大。

提示詞:請修改:數字的字型改為Arial,「重新開始」和「復原」的字體再放大。

結果如下:

利用Google Gemini Canvas打造2048遊戲

使用「分享」按鈕取得分享連結:https://g.co/gemini/share/5727fc0f9657

利用Google Gemini Canvas打造2048遊戲

複製連結後,可以直接在線上玩 2048 遊戲。

利用Google Gemini Canvas打造2048遊戲

在程式碼區中可以複製程式碼。

利用Google Gemini Canvas打造2048遊戲

將程式碼貼至記事本中,再另存新檔為附檔名為 html 的檔案,例如:2048.html。

利用Google Gemini Canvas打造2048遊戲

如此,這個 2048.html 檔案即可在電腦的瀏覽器中使用,不必再連線至 Google Gemini 的網址了。

利用Google Gemini Canvas打造2048遊戲

學不完.教不停.用不盡文章列表

文章標籤
Gemini Canvas 2048
全站熱搜
創作者介紹
創作者 vincent 的頭像
vincent

學不完.教不停.用不盡

vincent 發表在 痞客邦 留言(0) 人氣()