甚麼？網頁也可以做派對遊戲？使用 Vue 和 babylon.js 打造 3D 派對遊戲吧！
鱈魚(林昰辰)
買這商品的人也買了...
-
平衡掌控者 — 遊戲數值戰鬥設計$390$371 -
$403遊戲運營 : 高手進階之路 -
$654多人在線遊戲架構實戰：基於 C++ 的分佈式遊戲編程 -
$755騰訊遊戲開發精粹Ⅱ -
秒懂設計模式$480$379 -
Three.js 前端三維圖形開發案例集錦$768$730 -
Arduino 自造趣：結合 JavaScript x Vue x Phaser 輕鬆打造個人遊戲機 (iThome鐵人賽系列書)$690$538 -
新世代前端開發三雄鼎立 - Vue + React + Flutter 完整學習應用$1,280$1,011 -
Scrum Mastery 中文版：從優秀到卓越的僕人式領導力, 2/e (Scrum Mastery, 2/e)$600$468 -
第一名的網站開發 - Node.js 全端高手昇華之路$680$537 -
$458Node.js從入門到精通 -
ChatGPT 4 + API 創新體驗 AI 世界邁向開發機器人程式王者歸來（全彩印刷）$780$616 -
Vue.js 3 前端測試入門從這裡開始：透過 Vitest + Vue Test Utils 實現自動化測試（iThome鐵人賽系列書）【軟精裝】(封面有些許小摺痕,不介意再下單)$720$562 -
$352WebXR 案例開發 — 基於 Web3D 引擎的虛擬現實技術 -
Notion 最強效應用：卡片盒筆記法 × GTD 時間管理 × 電子手帳 × 數位履歷 × Notion AI$499$394 -
絕對會 Python 用場! 驚人的程式妙用$680$537 -
Vue.js 3 前端開發不踩雷：Composition API × Vue Router × Pinia，帶你快速升級進階開發者！（iThome鐵人賽系列書）【軟精裝】$650$429 -
網頁視覺特效最強必殺技大全：用 Three.js 與 Shader 圖說核心原理 x 閃避踩雷 x 創作指南（iThome鐵人賽系列書）【軟精裝】(書況有些許瑕疵,不介意在下單)$800$400 -
前端開發資安入門｜你不能忽視的漏洞對策必備知識$520$411 -
$512RTC 程序設計：實時音視頻權威指南 -
Vue.js 3 前端漸進式建構框架實戰應用｜完美搭配 Bootstrap 5 與 PHP$580$458 -
程式設計守則｜如何寫出更好的程式碼 (The Rules of Programming: How to Write Better Code)$620$490 -
AI 影音生成狂想曲 – 影片生成 × 語音克隆 × AI 翻唱 × 詞曲創作 × 背景音樂 × 虛擬人像 × 自動字幕$680$578 -
騰訊遊戲開發精粹Ⅲ$1,008$958 -
讓 AI 好好說話！從頭打造 LLM (大型語言模型) 實戰秘笈$680$537
中文年末書展｜繁簡參展書2書75折 詳見活動內容 »
-
75折
為你寫的 Vue Components：從原子到系統，一步步用設計思維打造面面俱到的元件實戰力 (iThome 鐵人賽系列書)$780$585 -
75折
BDD in Action, 2/e (中文版)$960$720 -
75折
看不見的戰場：社群、AI 與企業資安危機$750$563 -
79折
AI 精準提問 × 高效應用：DeepSeek、ChatGPT、Claude、Gemini、Copilot 一本搞定$390$308 -
7折
超實用！Word．Excel．PowerPoint 辦公室 Office 365 省時高手必備 50招, 4/e (暢銷回饋版)$420$294 -
75折
裂縫碎光：資安數位生存戰$550$412 -
日本當代最強插畫 2025 : 150位當代最強畫師豪華作品集$640$576 -
79折
Google BI 解決方案：Looker Studio × AI 數據驅動行銷實作，完美整合 Google Analytics 4、Google Ads、ChatGPT、Gemini$630$498 -
79折
超有料 Plus！職場第一實用的 AI 工作術 - 用對 AI 工具、自動化 Agent, 讓生產力全面進化！$599$473 -
75折
從零開始學 Visual C# 2022 程式設計, 4/e (暢銷回饋版)$690$518 -
75折
Windows 11 制霸攻略：圖解 AI 與 Copilot 應用，輕鬆搞懂新手必學的 Windows 技巧$640$480 -
75折
精準駕馭 Word！論文寫作絕非難事 (好評回饋版)$480$360 -
Sam Yang 的插畫藝術：用 Procreate / PS 畫出最強男友視角 x 女孩美好日常$699$629 -
79折
AI 加持！Google Sheets 超級工作流$599$473 -
78折
想要 SSR? 快使用 Nuxt 吧!：Nuxt 讓 Vue.js 更好處理 SEO 搜尋引擎最佳化（iThome鐵人賽系列書）$780$608 -
78折
超實用！業務．總管．人資的辦公室 WORD 365 省時高手必備 50招 (第二版)$500$390 -
7折
Node-RED + YOLO + ESP32-CAM：AIoT 智慧物聯網與邊緣 AI 專題實戰$680$476 -
79折
「生成式⇄AI」：52 個零程式互動體驗，打造新世代人工智慧素養$599$473 -
7折
Windows APT Warfare：惡意程式前線戰術指南, 3/e$720$504 -
75折
我輩程式人：回顧從 Ada 到 AI 這條程式路，程式人如何改變世界的歷史與未來展望 (We, Programmers: A Chronicle of Coders from Ada to AI)$850$637 -
75折
不用自己寫！用 GitHub Copilot 搞定 LLM 應用開發$600$450 -
79折
Tensorflow 接班王者：Google JAX 深度學習又快又強大 (好評回饋版)$780$616 -
79折
GPT4 會你也會 - 共融機器人的多模態互動式情感分析 (好評回饋版)$700$553 -
79折
技術士技能檢定 電腦軟體應用丙級術科解題教本｜Office 2021$460$363 -
75折
Notion 與 Notion AI 全能實戰手冊：生活、學習與職場的智慧策略 (暢銷回饋版)$560$420
相關主題
商品描述
甚麼？網頁也可以做派對遊戲！Σ(ˊДˋ;)
在3種風格迥異、搞笑有趣的遊戲中學習3D網頁開發。ᕕ( ﾟ ∀。)ᕗ
讓手機化作joy-con，即時連線控制遊戲人物。(/≧▽≦)/
☆不只是網頁
隨著瀏覽器的蓬勃發展，現在網頁可以存取GPS、加速度計、照度計、麥克風、攝影機等等硬體訊號，還可以配合WebGPU、WebGL運行複雜的3D內容。
基於上述理由，網頁已可以成為遊戲機，手機瀏覽器甚至能像joy-con一般，作為搖桿使用，本書將帶領大家從頭打造一個可以使用手機遙控的派對遊戲。
☆寓教於樂
本書將帶領大家如何建立3D遊戲並透過手機即時遙控，藉由遊戲與技術的連結，讓讀者能夠從底層了解運作原理且不會枯燥乏味。
☆由淺入深
本書將依序介紹Vue、babylonjs、NestJS等等技術，讓讀者可以循序漸進的認識相關技術，接著整合這些技術與工具，透過功能與遊戲層層堆疊，最終淬鍊成一個完整的網頁應用程式。
作者簡介
鱈魚(林昰辰)
機械、自動控制領域出身，在IoT概念普及後，一頭栽進前後端開發，熱衷於結合各類領域技術、開發酷酷的東西。
- LinkedIn：
https://www.linkedin.com/in/shih-chen-lin-codfish
- Youtube
https://youtube.com/@codfish2140?si=OCFOdURqNmNAbPxF
目錄大綱
第1章 沒時間解釋了，快上車！
1.1 原理與架構
1.2 開發工具
1.2.1 Visual Studio Code
1.2.2 Google Chrome
1.3 使用套件
1.3.1 TypeScript
1.3.2 Vue 3、Vue Router、Pinia
1.3.3 VueUse
1.3.4 Quasar
1.3.5 babylon.js
1.3.6 Tailwind CSS
1.3.7 NestJS
1.4 開發環境
1.4.1 Vue 前端專案
1.4.2 NestJS 後端專案
第2章 Vue基本概念
2.1 基礎概念
2.1.1 響應式與資料綁定
2.1.2 條件渲染與事件
2.2 元件
第3章 NestJS基礎概念
3.1 建立資源
3.2 驗證資料
第4章 打造派對門面
4.1 打造背景
4.1.1 建立背景元件
4.1.2 建立可複用的多邊形元件
4.1.3 漂浮吧！多邊形
4.2 打造選單按鈕
4.3 打造標題Logo
第5章 開趴前先 loading 一下
5.1 建立 loading 相關元件
5.2 載入就應該要有載入的樣子
第6章 讓前後端接上線
6.1 後端提供連線
6.2 前端開始連線
6.3 開房間！開派對！
6.3.1 伺服器建立房間資源
6.3.2 網頁建立派對
第7章 歡迎光臨遊戲大廳
7.1 大廳頁面
7.2 建立遊戲選單場景
7.3 建立選單按鈕
7.4 顯示房間ID與玩家
7.5 加入遊戲
7.5.1 輸入房間ID視窗
7.5.2 加入遊戲API
第8章 手機變搖桿
8.1 搖桿頁面
8.2 伺服器同步game-console狀態
8.3 完成跳轉大廳搖桿功能
第9章 所以我說那個搖桿呢？
9.1 傳輸搖桿資料
9.2 玩家一起粗乃玩！
9.3 網頁偵測玩家更新事件
9.4 是誰偷按確定？
9.4.1 對話泡泡
9.4.2 搖桿控制選單
第10章 第一隻企鵝
10.1 完成遊戲選單
10.2 大海、浮冰、企鵝勒？
10.3 企鵝登場
10.4 爆走企鵝
10.5 完全體企鵝
10.6 建立控制搖桿
10.7 一人一隻才公平
10.8 第一隻企鵝
10.9 完成大廳按鈕功能
第11章 小雞快飛
11.1 建立小島
11.2 建立遊戲場景
11.3 起飛吧！小雞！
11.4 完成天空
11.5 撞雞啦！
11.6 Web API授權
11.6.1 伺服器同步permission資料
11.7 遊戲機接收資料
11.8 建立姿態控制搖桿
11.9 小雞快飛！
11.10 增強遊戲體驗
第12章 狐狸與老鼠
12.1 建立狐狸島
12.2 建立遊戲場景
12.3 加入老鼠
12.4 狐狸登場
12.5 建立控制搖桿
12.6 搖桿接收資料
12.6.1 伺服器同步console資料
12.7 一起抓老鼠！
第13章 結束是另一個開始
13.1 重構企鵝遊戲
13.2 取消搖桿方向限制
第14章 後記
