發布遊戲：放上網路分享給朋友

這是這個單元的最後一堂課。回頭看看：你在紙上設計了玩法，搭出遊戲迴圈，和 Claude 一步一步做出接便當，加上了手感，也有了自己的美術。

現在，這款遊戲只活在你的電腦裡。這堂課我們要把它放上網路，讓你可以傳一個連結給朋友：「欸，玩玩看我做的遊戲。」那一刻，是做遊戲最開心的時刻之一。

發布是怎麼一回事？

你的遊戲就是一個資料夾裡的幾個檔案。所謂「發布」，就是把這些檔案上傳到一台 24 小時開著的網路伺服器，伺服器會給你一個網址，任何人用瀏覽器打開這個網址，就會下載這些檔案、在自己的裝置上執行遊戲。

因為接便當是純 HTML、CSS、JavaScript，沒有需要另外架設的後端程式，所以有好幾個免費的地方可以放。

三種方式選一種就好，做完都會得到一個網址。

上傳前的檢查

先請 Claude 幫你做一次發布前的健康檢查：

為什麼檔名要小心？你的電腦通常不分大小寫，Bento.png 和 bento.png 會被當成同一個檔案；但很多網路伺服器會分，程式寫 bento.png、檔案叫 Bento.png，上線後圖片就會消失。這是新手發布時最常踩到的坑。

三種免費的發布方式

	itch.io	Cloudflare Pages	GitHub Pages
適合誰	想讓更多遊戲玩家看到	想要最簡單的專屬網址	已經會用 git 的人
怎麼上傳	把資料夾壓縮成 zip 上傳	在網頁上拖曳資料夾上傳	把檔案推到 GitHub 儲存庫
額外好處	有遊戲頁面、留言區、玩家社群	速度快，之後可接自己的網域	每次更新都有版本紀錄
需要準備	itch.io 帳號	Cloudflare 帳號	GitHub 帳號與 git

三個都需要註冊帳號，請自己到官方網站註冊。如果拿不定主意，做遊戲的話就先選 itch.io，它本來就是為獨立遊戲設計的平台。各平台的按鈕位置和流程偶爾會改版，以下寫的是大方向，畫面看起來不一樣也不用擔心。

做法一：上傳到 itch.io

1. 壓縮成 zip。 打開 bento-game 資料夾，選取裡面的所有檔案（不是選資料夾本身），按右鍵壓縮成 zip。這樣打開 zip 時，第一層就是 index.html。
2. 建立新專案。 登入 itch.io，在自己的控制台建立新專案，填上遊戲名稱和簡短介紹。
3. 選擇 HTML 類型。 專案類型選 HTML，上傳剛剛的 zip，並勾選「這個檔案要在瀏覽器裡遊玩」的選項。
4. 設定畫面大小。 嵌入畫面的尺寸可以設成 480 x 640，和我們的畫布一樣；如果有「支援行動裝置」或「全螢幕按鈕」的選項，也一起勾起來。
5. 先存成草稿預覽。 自己先玩一次，確認沒問題，再把公開狀態改成公開。

做法二：Cloudflare Pages 拖曳上傳

登入 Cloudflare，找到 Pages 的建立頁面，選擇「直接上傳」的方式，替專案取一個英文名字，然後把 bento-game 資料夾拖進去。完成後會得到一個 專案名稱.pages.dev 的網址。之後要更新，再上傳一次新的版本就好。

做法三：用 Claude Code 發布到 GitHub Pages

如果你在其他單元學過 git 和 GitHub，可以請 Claude Code 幫你完成大部分步驟：

開啟後等一兩分鐘，網址通常會是 你的帳號.github.io/bento-game。

用手機實際玩一次

網址拿到之後，一定要用手機打開玩一局。電腦上一切正常，不代表手機也是。這六件事逐一確認：

最好 iPhone 和 Android 各找一支試試。

手機上最常發現的問題是第 3 項：手指會擋住托盤，還會擋住正要掉進托盤的東西。這是很好的改進機會：

改完後，要再上傳一次新版本，網址不會變。如果手機上看起來還是舊版，那是瀏覽器記住了舊檔案，重新整理或稍等一下就會更新。

分享出去

最後，讓連結被分享時看起來更像樣。請 Claude 在 index.html 加上分享用的標題與介紹：

傳連結給朋友時，附上一句你自己的話，比冷冰冰的網址溫暖很多：

我最近用 AI 做了一款小遊戲「接便當」，手機就能玩，大概一分鐘一局！
你玩玩看，跟我說你最高幾分，還有哪裡覺得怪怪的 🙏
（貼上你的網址）

「哪裡覺得怪怪的」這句很重要。朋友的回饋，就是你第二版的設計書。