前言
本期開發者｜Caleb Lin
如果早餐也能變成遊戲素材，會是什麼模樣？
Caleb 決定自己動手，做出一款結合文字與早餐的遊戲——《文字貪食蛇：早餐版》。
這款用 P5.js 開發、部署在 GitHub Pages 的網頁小遊戲，
讓經典的貪食蛇吃的不是像素，而是一個個「早餐文字」：飯糰、蛋白質、咖啡飲品……
🎮 一起體驗 👉 https://calebtestbeta.github.io/
靈感來自一場字體活動
「其實一開始只是想投稿公司內部 LINE SEED 字體徵稿活動而已。」Caleb 說。
他想著：「如果要用字體創作，有沒有辦法讓字體也能『動』起來？」
於是就有了這個結合「文字 × 早餐 × 經典遊戲」的發想。
這次開發過程中，Caleb 也嘗試了 AI 協作開發 的方式。
他先用 AI 撰寫 prompt，規劃遊戲邏輯與畫面結構，
再將生成的程式丟給 Claude Code 進一步修改、調整事件邏輯。
「就像我和 AI 一起 pair programming，
AI 幫我生出骨架，我再幫它調整性格。」——Caleb
完成初版後，他使用 P5.js 設計互動邏輯：
利用 keyPressed() 偵測方向鍵、draw() 控制畫面刷新，
並設計 collision detection() 判定蛇吃到文字或撞牆即結束。
為了修正鍵盤延遲與節奏，他後來加了倒數與速度調整，
讓整體遊戲操作更順暢。
用 GitHub Pages 讓作品動起來
「因為簡單又免費，push 一次、開 Pages 功能、網址就出來了。」
Caleb 選擇 GitHub Pages 作為遊戲的發佈平台。
部署方式
他將專案放在名為 calebtestbeta.github.io 的 repository。
GitHub Pages 會從 main branch 的根目錄讀取靜態檔案，
因此只要 push HTML、CSS、JS 到該 branch，就能自動生成公開網站。
設定重點
- 在 repo 的「Settings → Pages」選擇來源：
mainbranch - 指定
/為根目錄 - 若使用子目錄或
gh-pagesbranch，也能自訂來源
應用場景
GitHub Pages 不只能放文件，對前端工程師來說更是一個展示互動作品的好地方：
不論是 P5.js、Canvas 或小型 Web 工具，都能即時上線測試。
「不用伺服器、不用設定 domain，push 上去就能給別人玩，這點真的很方便。」
他笑著補充：「公司內的 Github pages 只能內部存取，且需要登入，這次剛好拿公開的 GitHub Pages 來試水溫，也方便大家用手機玩。」
Caleb 還為遊戲體驗做了許多優化：
- 偵測是否安裝 LINE SEED 字體（沒有就 fallback 系統字體）
- 固定畫布比例，避免手機畫面變形
- 加入倒數、速度與難度控制，讓體驗更完整
「看著自己的想法從一行程式變成能被大家玩的遊戲，
那種成就感很單純，但很開心。」
開發背後的那些事｜Q&A with Caleb
Q：可以再多補充一點這次的開發流程細節嗎？
Caleb：
我一開始是先用 ChatGPT 來構思整體架構，
像是輸入畫面的尺寸、角色移動邏輯、碰撞判斷、食物刷新機制這些，
都先用 prompt 讓 AI 幫我生成基本的框架。
生成完後，我再把那段程式丟給 Claude Code，
讓它幫我優化程式結構、事件監聽與遊戲循環。
例如：
- 把原本寫死的鍵盤事件改成動態監聽（keyPressed() 搭配防呆機制，避免快速反轉方向）
- 在 draw() 裡面增加畫面重繪與蛇身座標更新邏輯
- 用一個陣列來記錄每一節身體的座標位置，確保移動平滑
- 新增 checkCollision() 來判定蛇頭是否撞到自己或邊界
AI 幫我產出的程式雖然可執行，但有些地方還是太理想化，
例如座標運算有 bug、刷新速度不一、還有食物偶爾會刷新在蛇身上（笑）。
所以我後來手動調整了 frame rate、延遲時間與碰撞容差，
並加上 setInterval() 去控制遊戲節奏，
讓整體速度更符合一般玩家的反應節奏。
最後我在整合階段用 GitHub Pages 部署，
搭配外部的 P5.js CDN 連結，讓整個遊戲能即時渲染在瀏覽器上。
這樣不只能讓朋友線上玩，也方便 debug、調整視覺比例。
「AI 幫我生出骨架，我再幫它補上骨頭跟靈魂，」
Caleb 笑說，「我覺得這樣合作蠻有趣的，能把時間留給真正重要的體驗設計。」
Q：選擇 GitHub Pages 來部署，有什麼原因嗎？
Caleb：
我喜歡它的輕量跟簡單。
Push 一次、開啟 Pages 功能，幾秒鐘就有公開網址。
不需要伺服器、不用設定 CI/CD pipeline，
對 side project 來說這幾乎是最方便的舞台。
而且 Pages 免費、穩定、支援 HTTPS，
更新也只要再 push 一次就好。
Q：在開發過程中，有沒有哪個細節讓你印象最深？
Caleb：
應該是字體偵測那段。
我原本想讓大家都裝 LINE SEED（笑），
後來發現手機上不能安裝字體，就改成系統自動判斷。。
有裝就顯示 LINE SEED，沒有就 fallback 到預設字體。
這樣使用者一打開就能玩，不需要額外設定。
這種小細節，對體驗來說差很多。
Q：這次 開發中你學到最多的是什麼？
Caleb：
這次最大的感覺是更了解怎麼「把想法真的做成能被玩到的東西」。
我之前也做過幾個小專案，但這次會更在意整體體驗，
像是操作節奏、畫面比例、甚至玩家第一次開啟時的流暢度。
每個小細節都會影響玩起來的感覺。
我更清楚 AI 在開發中的定位。
它不是替你構思或決定方向，而是幫你「更快動手」的輔助工具。
開發前，你要先有清楚的 roadmap；
開發後，讓 AI 解釋架構與流程，確認成果是否符合預期，
再進一步要求它 code review 並 refactor(AI鏟屎官)
這樣 AI 才能真正發揮價值，幫助你提升品質與效率。
ps:AI 鏟屎官 可以看 AI新職缺：「Vibe Coding清理員」是什麼？為何有普信工程師，就需要AI鏟屎官？
小結
這次訪談 Caleb，最讓我印象深的是他對開發的思考方式——不只是完成一個遊戲，而是把整個過程當成架構練習。從互動邏輯到部署細節，每一步都在思考可讀性與可維護性；AI 幫他處理重複的部分，他則專注在體驗與創意。當程式能被拿來表達靈感時，那就是開發最迷人的瞬間:)。