本系列文已改編成書「甚麼？網頁也可以做派對遊戲？使用 Vue 和 babylon.js 打造 3D 派對遊戲吧！」

書中不只重構了程式架構、改善了介面設計，還新增了 2 個新遊戲呦！ˋ( ° ▽、° )

新遊戲分別使用了陀螺儀與震動回饋，趕快買書來研究研究吧！ლ(╹∀╹ლ)

在此感謝深智數位的協助，歡迎大家前往購書，鱈魚感謝大家 (｡･∀･)。

助教：「所以到底差在哪啊？沒圖沒真相，被你坑了都不知道。(´。＿。｀)」

鱈魚：「你對我是不是有甚麼很深的偏見啊 (っ °Д °;)っ，來人啊，上連結！」

首先不免俗地，一定是先安裝 Node.js 啦 (´,,•ω•,,)

接著我們需要分別建立 Web 與 Server 的專案環境。

網頁

提供遊戲機與玩家搖桿介面，透過 WebSocket 達成即時通訊功能。

基本上本次網頁基於以下框架、套件或環境進行開發：

• Vue 3、Pinia、Vue Router

• Tailwind CSS

• socket.io-client

  封裝 WebSocket API，使其更容易使用，並新增各類實用功能。

• Quasar

  基於 Vue 建構之框架，功能及廣，從實用組件一路包到 SSR 處理，甚至含 APP 開發。文檔詳盡、彈性及高。

• babylon.js

  微軟開源之 Web 3D 套件，集成了物理模擬、材質管理工具等等完整的功能。

• VueUse

  提供大量現成 Composition API，節省大量時間

• lodash-es

• TypeScript

• Vite

伺服器

提供 WebSocket 通訊，讓所有網頁能夠同步資料。

• NestJS
• Socket.IO

以上，沒惹 (´,,•ω•,,)

讀者可能會想說「怎麼這麼少 （゜ー゜）？」，畢竟主題是「Modern Web」不是「Modern Server」，所以在此大幅簡化惹 ~(￣▽￣)~*。

本次專案專注於網頁遊戲呈現，所以 Server 只負責 WebSocket 連接與資料轉送，不會涉及資料儲存等等資料庫問題。有興趣的讀者也能自己魔改成有一套完整會員系統的版本 ヾ(≧▽≦*)o（然後提個 MR 協助貢獻）

最後要安裝一個工具，就是 Nest CLI，可以協助開發人員快速的新增各類模板，相當方便。

讓我們運行以下命令，即可完成安裝。

 npm install -g @nestjs/cli

想先了解的讀者可以看此連結：Nest CLI 說明

開發環境

編輯器

編輯器使用 VS Code 進行開發，以下推薦好用的外掛，在此次專案中獲得最佳開發體驗。

• Vue Language Features (Volar)
• Tailwind CSS IntelliSense
• Code Spell Checker
• Sass
• ESLint

以上外掛在 Web 專案下皆可用，但在 Server 專案下建議關閉以下外掛：

• Vue Language Features (Volar)
• Tailwind CSS IntelliSense
• Sass

以免造成影響。（伺服器專案也完全用不到就是了 (・ω・)）

瀏覽器

主要使用 Google Chrome 進行開發，請安裝「Vue.js devtools」這個外掛，我們在開發的過程中會使用此外掛進行 debug。

• Chrome 線上應用程式商店 - Vue.js devtools

專案連結

大家可以依據建置環境，也可以直接 clone 以下連結（建議 clone 連結，以免開發環境有落差，出錯就 QQ 惹）

• Web
• Server

clone 完成之後，跑一次 npm i，讓我們開始開發吧！