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遊戲

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

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

    學不完.教不停.用不盡

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