CASE STUDY · WEB PRODUCT

楚河棋局
線上中國象棋

把棋類規則、跨裝置房間、狀態同步、API 與資料庫整合成可以直接使用的 Web 產品。

Live Demo ↗GitHub ↗
角色
全端 Web 產品開發
範圍
棋規 · 多人房間 · 狀態同步 · Persistence
狀態
Live
技術
JavaScript · HTTP API · Neon Postgres / D1
年份
2026

00 / Project framing

專案脈絡與工程判斷

Problem多人棋局除了規則正確,還要避免不同裝置的舊狀態覆蓋新棋局,並處理重連與房間生命週期。
Decision使用 revision + polling、player token、heartbeat 與持久化房間 state,把 UI 規則與多人同步分層。
Evidence可核對 6 碼房間、2 種主要棋規、Neon Postgres / Cloudflare D1 兩種資料庫後端,並有公開 Live Demo。
Next下一步是抽出共用 game engine、補自動化規則測試,並讓 server 成為規則權威來源。

01 / Verified metrics

產品能力可以從 repository 直接核對。

6碼房間代碼,分享即可加入
2主要棋類規則:標準象棋 / 揭棋
2主要 API:rooms / change-side
2資料庫後端:Neon Postgres / Cloudflare D1

另包含 AI、悔棋雙方確認、棋譜回放、沙盤、自訂棋局、heartbeat 與 7 天舊房清理。

02 / Architecture

前端規則與多人狀態分層

Browser UIHTML / CSS / JavaScript、棋盤與規則
HTTP APIGET / POST rooms、change-side
Revision Syncpolling、player token、heartbeat
PersistenceNeon Postgres 或 Cloudflare D1

03 / Challenges

多人同步用 polling 與 revision 避免舊狀態覆蓋最新棋局。
Reconnect玩家 token 存在 LocalStorage,可重新加入原席位。
Variants同一套 UI 支援標準象棋、揭棋、沙盤與自訂棋局。
Persistence房間保存完整 state、revision、玩家 heartbeat、悔棋請求與最後更新時間。

04 / Product

LIVE PRODUCT · MULTIPLAYER WEB

從單機棋盤走到完整 Web 產品。

保留原本的品牌主視覺,但用產品展示框控制圖片比例與留白,讓視線先落在作品本身,再接到工程演進。

chuhe xiangqi · web product
楚河棋局實際產品畫面
楚河棋局目前的產品視覺;Case Study 主要聚焦多人同步、重連與持久化,而不是把主視覺本身當成工程成果。

目前 README 也明確記錄下一步:抽出共用 game engine、補自動測試,讓 Server 成為規則權威來源。