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

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

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

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

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

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

成果影片

不廢話，先上成果！( •̀ ω •́ )✧

緣起

隨著網頁的快速發展，瀏覽器的 Web API 功能越來越多，Web 的奇技淫巧也越來越多。手機瀏覽器甚至有了多種硬體的存取能力，例如加速度、亮度等等各類感測器（Sensor APIs），甚至是震動馬達（Vibration API）等等。

有興趣的讀者可以參考此連結：MDN - Web APIs

某天望向手中的 joy-con，忽然靈光一閃，「手機不是已經幾乎有 joy-con 的所有功能了嗎？這樣不就可以用手機和 Web 重現一個類 Switch 的遊戲機？」

於是這次的主題就誕生了！

這次主題的目的很簡單，就是嘗試利用 Web 技術打造一個類 Switch 的遊戲機！那就讓我們先認識認識預期同行的小夥伴們吧！( •̀ ω •́ )✧

派對開始

老師，請下音樂！

運送肥宅快樂粉的超大型航空母雞在高空中爆炸啦！

快樂粉隨風飄至全世界。

遠至南極，近至水溝，忽然間所有的動物們都嗨起來了！

最後故事編不下去了，讓我們開始吧！o(≧∀≦)o

派對小夥伴們

以下是此次專案主要使用的技術或框架。

Vue 3、Vue Router、Pinia

圖片來源：Vue 官方網站

就是經典的 Vue 全家桶，涵蓋前端框架、路由管理、狀態管理功能。

選擇 Vue 3 則是因為其 TypeScript 支援度較佳，且有 Composition API，相較於 Vue 2 來說，更適合用於開發這類應用程式型的網頁。

Quasar

圖片來源：Quasar 官方網站

基於 Vue 之多功能 Framework，包含大量開發常用情境與功能，例如：SPA、SSR、PWA、Mobile App、Electron、Browser Extensions，而且官方文件內容齊全，強力推薦。

（現在沒有 Quasar 我都不會做網頁了 ᕕ( ﾟ ∀。)ᕗ）

一時用 Quasar 一時爽，一直用 Quasar 一直爽

babylon.js

圖片來源：babylon.js 官方網站

網頁 3D 引擎，大家可能最常聽過的網頁 3D 套件是 Three.js，不過 Three.js 主要專注於繪圖的部分，而 babylon.js 則包含了物理模擬、材質管理工具等等完整的功能，更在 5.0 版本加入了 WebGPU，讓性能可以更上一階。

加上因為和 TypeScript 同一個老爸（都是微軟），所以對於 TypeScript 支援度極佳，因此本次專案選擇 babylon.js。

NestJS

圖片來源：NestJS 官網

基於 Node.js 之後端框架，結合了 OOP、FP 與 FRP 設計，並完全支援 TypeScript 開發，熟悉 Angular 的讀者應該會覺得很親切，因為 NestJS 許多設計就是啟發於 Angular。

此專案中，後端 Server 透過 WebSocket 連接所有 Web，同步所有 Web 狀態與房間配對等等功能。

行前須知

由於本篇不是基礎教學文（窩怕誤人子弟 QQ），所以以下內容不會特別說明：

• HTML、CSS、JS 基本概念
• ES6 以上語法
• Vue、Vue Router、Pinia 基本使用
• Component 封裝
• Composition API
• TypeScript 概念
• NestJS 基礎概念

此專案所有程式碼都會放在 GitLab 上讓大家下載，可以慢慢研究 ( •̀ ω •́ )✧

計畫內容

接下來預期的內容與技術：

• 介面呈現

  使用 Web 技術設計主機畫面與控制器畫面

  • 主機畫面

    建立房間、提供連線並呈現遊戲主要內容

  • 控制器畫面

    手機端呈現，概念同遊戲機搖桿

• WebSocket 即時通訊

  使用 NestJS 建立即時通訊伺服器，串聯遊戲端與玩家端

• 3D 遊戲

  使用 babylon.js 建立 Web 3D 遊戲

  • 第一隻企鵝

    企鵝群下水前，會將最前頭的企鵝踢下水，確認水中沒有天敵後才會下水，努力不要被踢下水吧！

    控制企鵝在冰山上互撞，冰山會隨著時間逐漸縮小，存活到最後者勝利。

  • 其他遊戲努力更新中

本次專案為了不讓功能變得過度複雜，所以會盡量以最簡功能實現，不會處理多種分支。

大家可以放心閱讀，希望大家不會看到睡著 (o゜▽゜)o☆。

那就讓我們開始吧！