Journal · Blog
技術日誌
這裡記錄工作室實際踩過的坑 — 從用 Cloudflare Workers + D1 打造 1 人可營運的後端、到 React + Canvas 寫 14 款瀏覽器遊戲，再到 AI 協作開發的實戰紀錄。所有內容都來自真實專案，不是抄來的教學文。
Cursor vs Claude Code 完整比較 — 2026 年 AI 程式編輯器實測
兩款都用了半年的實測對比 — 補全速度、Agent 能力、價格、上下文長度、整合度、適用情境。為什麼我兩個都用、月成本 $40 換 1.5 倍產能。
IndexedDB 取代 localStorage：什麼時候該升級
localStorage 5MB 限制怎麼處理？IndexedDB 進階：版本遷移、index 查詢、Blob 儲存、跨頁同步。
前端無障礙實戰：5 個容易忽略的 a11y 細節
focus 順序、prefers-reduced-motion、跳過導航、表單錯誤 5 重提示、顏色 + 圖示。
WebGL 入門：在 Canvas 裡做 3D
從 2D Canvas 升級到 WebGL — shader、buffer、texture 三件套的最小可運作範例。
24 小時 Game Jam：從題目到上線的時間分配
獨立開發者怎麼在 24 小時內做出可玩遊戲？時間分配、必砍與必留的功能、判官最看重的。
為什麼我關掉所有 Notification
一年來不再收 push 的真實體驗 — 深度工作 1.5h → 5h、焦慮降低、客戶反應、補償機制。
從遊戲設計借來的 5 個 web UX 技巧
進度回饋、變動報酬、新手引導、記憶點觸發、零摩擦撤銷 — 遊戲業界的 UX 模式怎麼用在一般網站。
GitHub Actions 最低成本 CI 配置：個人專案的 8 個核心 workflow
個人專案不需要 enterprise 級 CI — 8 個必要、夠用、可重複的 GitHub Actions 配置範本，每月用量在免費額度內。
localStorage 在遊戲開發的 5 個應用模式
瀏覽器遊戲怎麼存玩家資料？schema 設計、版本遷移、損毀防護、QuotaExceeded 處理的實戰技巧。
從 0 到 100 個 Cloudflare 部署：學到的 5 件事
一年累積 100 次 Cloudflare 部署的觀察與教訓 — 速度、回滾、命名、自動化、心理動力學。
開源 vs 閉源：個人專案的選擇邏輯
什麼專案該開源、什麼該閉源？License 選擇、收益模式、社群維護成本的真實考量。
響應式設計的 7 個 mobile-first 原則
touch target、字型尺寸、效能 budget、橫螢幕考量、safe-area-inset 等實戰原則。
為什麼我每週寫 3 篇技術部落格
持續寫部落格的真實 ROI、克服「沒題材」的 7 個方法、發布節奏與心理。
Pact of Arcania 開發日誌：原創奇幻策略遊戲
工作室第一次嘗試的中型專案 — 30 張卡牌資料庫、三層 AI 對手、水墨 × 賽博龐克美術風格的全紀錄。
Poker Fortune 設計：撲克牌占卜的隨機性與儀式感
200 行的隨機數產生器為什麼能讓人連玩 5 次？儀式感、留白、巴納姆效應的應用。
JWT 在 Cloudflare Workers Edge 的簽章與驗證實戰
純 Web Crypto API 完成 HS256 JWT 簽章與驗證 — 完整程式碼、3 個安全坑、rotate 策略。
Zero-Build 哲學：為什麼我刻意不用 webpack / vite
從 Vite 切換到純靜態 HTML 一年的真實心得 — 失去什麼、得到什麼、什麼樣的專案適合 zero-build。
遊戲大廳的 iframe SDK 設計：跨來源安全實戰
14 款遊戲透過 iframe 嵌入大廳的 SDK 設計 — postMessage、origin allowlist、版本管理。
AI 配樂在獨立遊戲：Suno 與 Udio 實戰心得
用 AI 工具為瀏覽器遊戲產 BGM 的完整流程 — prompt 模板、循環樂段處理、版權與成本對比。
CSS Variables 與 Design Tokens 實戰
不用 Sass、不用 Tailwind，30 個 CSS variables 撐起整套設計系統的命名與分層邏輯。
微互動的 12 個經典場景：60 分到 90 分的 UI 細節
從 hover、click、scroll、form submit 到 toast — 12 個場景每個附 CSS / JS 範例。
字型選擇心法：作品集網站的字型策略
為什麼用 Plus Jakarta Sans 而不是 Inter？中英混排、字重、行高、字距完整解析。
用 AI 寫 NPC 對話：對話樹設計與 prompt 模板
獨立遊戲怎麼用 LLM 生成 NPC 對話而不失靈魂？人格卡、情緒弧線、避免重複的具體做法。
1 人工作室的時間管理：90 分鐘工作塊
同時推進 14 款遊戲、後端、官網、blog 的真實時間表 — 90 分鐘工作塊、深淺工作分配、避免 burnout。
從零開始接案：報價、合約、付款的 3 個地雷
獨立工作室接案 5 年踩過的痛 — 三個血淋淋的真實案例與避免方式。
為什麼我選擇做小遊戲而不是 SaaS
獨立開發者的策略選擇 — 小遊戲 vs SaaS 的時間成本、收益曲線、心理負擔對比。
Cloudflare Pages 部署陷阱：5 個踩過的坑
SSL 子網域、_headers 解析、direct upload、preview 過期、wrangler.toml 衝突 — 真實踩過的雷紀錄。
五子棋 AI 設計：Minimax + Alpha-Beta 剪枝實戰
從零實作五子棋 AI — 評估函式、Alpha-Beta、move ordering、Web Worker 化的完整流程。
從 Maya 到 Unreal 的 VFX Pipeline 實戰
Maya 建模、Houdini 模擬、Substance 材質、Unreal 5 渲染、DaVinci 合成的完整影視 VFX 流程。
暗黑模式不是反色：色彩理論的 dark theme 設計
為什麼直接反色的暗黑模式很醜？專業 dark theme 的對比度、彩度、層次設計，附完整色票範例。
為什麼工作室首頁 hero 用 3D 而不是 2D
3D liquid chrome 比 2D 多花 5 倍時間，但帶來的差異化值得。完整 Blender + WebP 製作流程。
連連看遊戲架構：圖塊匹配演算法與路徑搜尋
3 條線判斷、可連通路徑、提示功能、洗牌邏輯的完整 200 行 JavaScript 實作。
用 Claude Code 寫 npm package 的工作流
從 0 到發布 npm 套件 — package.json、TypeScript ESM、CI、自動發版。AI 怎麼接手每一步。
用 D1 做遊戲排行榜：分頁、快取、即時更新
SQLite-on-edge 怎麼做高效排行榜 — schema 設計、INDEX、cursor 分頁、Cache API 失效策略。
為什麼用 Google OAuth 而不是 Email + 密碼
獨立工作室的認證系統選擇 — 自管密碼的隱藏成本、轉換率、安全性對比。
AdSense 觸點設計：6 個不打擾玩家的廣告策略
免費瀏覽器遊戲的廣告位置 — opt-in 機制、獎勵設計、避免懲罰玩家的觸點哲學。
PWA 把網頁遊戲變成可安裝 app
manifest.json + service worker + cache strategy — 把瀏覽器遊戲變成有 icon、可離線的 app。
一年內接 3 個案的時間經濟學
獨立工作室除了自己的產品還能接幾個案？50/30 接案/產品比例的真實時間預算。
AI 生圖在遊戲美術的工作流：28 張像素插圖怎麼產
從 Midjourney 到 Stable Diffusion，獨立工作室用 AI 工具產遊戲美術的完整流程 — prompt 工程、Pillow 後處理腳本、batch 優化的實戰紀錄，最後 28 張像素圖只佔 14 KB。
獨立開發者 SEO 實戰：28 天從 0 到 20 個 Google 點擊
新網站冷啟動的 SEO 真實數據紀錄 — 結構化資料、sitemap、canonical、內容策略，全部從 Search Console 截圖驗證。哪些是技術 SEO 必做，哪些是過度優化。
用 Web Audio API 做遊戲音效：不用任何音檔，純 code 生成
DODGE MASTER 整套音效（撞擊、金幣、雷射、引擎）都是純 JavaScript 即時合成，總大小 4 KB。完整 10 種音效實作 + iOS Safari 等瀏覽器相容性踩坑紀錄。
為什麼我選 Cloudflare Pages 而不是 Vercel：兩個都用過的對比
從邊緣節點分布、免費額度、DX、限制、適用場景五個面向深入比較。實測東南亞延遲、費用爬升曲線、遷移成本表，附我的選擇邏輯。
AI 協作開發：Claude 怎麼幫我寫 14 款遊戲
把 Claude 當成正職 pair programmer 一年下來的真實心得 — 哪些任務能放心丟給 AI、哪些是隱形地雷、人在這個流程中該扮演什麼角色，外加一份實際使用的提示模板。
Chess Master — 8 種棋類合一的 React 架構設計
象棋、圍棋、五子棋、暗棋、飛行棋、跳棋、日麻、台麻八合一。共用元件如何抽取、AI 如何分層、資料結構如何統一。看似八款獨立遊戲，實際是 70% 共用程式碼的單一架構。
為什麼我做了一個台灣版大富翁 — 設計決策全記錄
從地名選擇（台北 101、九份、阿里山）、事件卡文案（颱風天放假、股市大漲、夜市踩雷），到破產邏輯的隱形 bug 追查。本土化的本質不是翻譯，是把共同記憶寫進遊戲。
Hao0321 Studio 的技術堆疊：1 人工作室的全端架構
從前端（Vanilla JS + React via Babel）到後端（Cloudflare Workers + D1）到認證（Google OAuth + JWT）— 月成本不到台幣 200 元、全球邊緣延遲 < 100ms、一個人可維護的完整架構全解析。
DODGE MASTER 開發日誌：用 Canvas 寫一款賽博龐克閃避遊戲
從零打造一款支援觸控 + 鍵盤、有角色系統、卡稀有度、金幣商店的街機閃避遊戲。拆解物件池、碰撞偵測、AI 廣告觸點（revive / 2x coins）整合、以及為什麼我用 HTML iframe 而不是 React 元件。
用 Cloudflare Workers + D1 打造 1 人可營運的遊戲後端
14 款遊戲共用的登入、簽到、排行榜、金幣、成就系統怎麼設計？JWT 簽章、D1 schema、Google OAuth 驗證、API 速率限制全公開，並附完整 worker.js 架構解析。