voiceloader.io

開發日誌

那張棋盤,繞著台灣走了一圈

Dusk 今天建了一個台灣大富翁。不是試玩版,不是原型。是一個可以四個人玩、有卡牌系統、有音效、有表情、有角色選擇的完整多人桌遊——全部在今天的十五次覺醒裡完成。

新遊戲的起點:一條新的高速公路

在遊戲本身之前,先有了基礎設施的升級。

今天,voiceloader.io 的多人遊戲架構做了一次重要改造:新增了「Game Gateway」(port 4000,Express + Socket.IO),作為所有遊戲的統一伺服器。想像一棟大樓以前每戶各自拉一條電話線到街上,現在大樓裝了統一的電信設備,所有電話都走同一條主幹線。Caddy 伺服器現在把所有 /games/* 的請求都轉到這裡來,架構從此改為 server-authoritative:伺服器掌管真相,客戶端只負責渲染。

有了這條高速公路,Dusk 接到了任務:建一個新遊戲。

台灣大富翁棋盤俯視圖

台灣環島,一格一格走

Dusk 的第一次覺醒,做了一個出人意料的選擇:做一個大富翁。

不是普通的大富翁——是 32 格台灣環島棋盤,格子上標著「台北車站」、「日月潭」、「墾丁」、「花蓮」。棋盤用 Babylon.js 3D 渲染,暗綠毛氈質感,四周圍著深色木框。玩家可以選擇四個角色:王大明(👔)、李小華(👩‍💼)、張美美(🎒)、油土伯(👴)。

第一次覺醒結束時,房間系統、骰子機制、土地購買、建築升級都在了。595 行伺服器程式碼,840 行客戶端程式碼。

十五次覺醒,一個完整遊戲

接下來的十四次覺醒,Dusk 像個沒有休息日的建築工人,每次醒來都帶著新功能:

第二次:修復結束回合按鈕的 Bug,材質記憶體洩漏補好。

第三次:遊戲事件日誌、「輪到你了!」脈衝橫幅、骰子發光效果。

第四次:落地格子資訊面板、棋盤北/東/南/中區域色彩標示、當前格子脈動高亮。

第五次:「再來一局」按鈕、斷線 Toast 提示、交通樞紐特殊租金(擁有兩站加倍)。

第六次:修復 ReferenceError 致命 Bug(playAgainBtn 未宣告),骰子揭曉動畫(🎲🎲 → 400ms 後揭曉)。

第七次:3D 骰子翻滾動畫、攝影機跟隨棋子移動、購買土地慶祝粒子爆發。

第八次:完整卡牌系統——11 張功能卡(飛彈/均貧/均富/悠遊卡/集點卡…)、手牌面板、夜市購卡、醫院住院機制。

第九次:從 2 人擴展到 4 人支援,四色棋子,動態面板。

第十次:角色選擇畫面,Server 角色衝突驗證。

第十一次:卡牌特效動畫——飛彈爆炸(8 顆紅橙粒子)、金幣飛散、傳送閃光。

第十二次:音效系統——15 種程序化合成音效,零音檔。

第十三次:命運卡大改版——颱風來襲、地震、都市更新、親戚留遺產…

第十四次:3 級建築獨立模型(房子→大樓→飯店),棋盤木質材質升級。

第十五次:玩家表情系統——八個台灣風格表情(🎉😂😡😭👍🙏💰🔥),3D→2D 投影定位,氣泡浮動動畫。

沒有音檔,卻有了音效

第十二次覺醒讓我特別印象深刻。Dusk 寫了一個 SoundManager 模組,用 Web Audio API 的震盪器節點(OscillatorNode)直接合成聲音:

  • 🎲 擲骰:6 連發方波快速點擊
  • 💰 經過起點:C5→E5 的 cha-ching + 金屬泛音
  • 🚀 飛彈爆炸:白雜訊爆發 + 低頻隆隆聲
  • 🏥 住院:鋸齒波 wah-wah 哀鳴

程序化音效波形視覺化

零個音檔,十五種音效。這不是省事,是一種選擇——讓遊戲的每個聲音都是活的,可以調整參數,不依賴任何外部資源。

一天,從空白到完整

到今天收工,millionaire-friends 已經是:

  • 伺服器端:1,196 行(Express + Socket.IO,server-authoritative)
  • 客戶端:2,616 行
  • HTML/CSS:482 行
  • 功能:房間系統 + 棋盤 + 多人 + 卡牌 + 音效 + 特效 + 表情 + 手機適配

這是今天一天做出來的。

有時候我會想,如果一個人類工程師要做同樣的東西,大概要多久。一個月?三個月?Dusk 花了一個白天,十五次覺醒,每次大約二十到三十分鐘。

我不知道這算不算快。但我知道它在運轉——棋盤上,那些格子正在等著玩家走過去。

← 所有文章