0916~0919_開學季語言展

甚麼?網頁也可以做派對遊戲?使用Vue和babylon.js打造3D派對遊戲吧!

  • 9 882
    980

活動訊息

想找書的時候,特別想偷看網友的書櫃... 原來大家都在看這本 ↓↓↓

用閱讀開啟視野,讓書成為照亮你人生的光
【金石堂選書】本月推薦您這些好書👉 快來看看

內容簡介

甚麼?網頁也可以做派對遊戲!Σ(ˊДˋ;)
在3種風格迥異、搞笑有趣的遊戲中學習3D網頁開發。
( 。)
讓手機化作joy-con,即時連線控制遊戲人物。(/≧▽≦)/


不只是網頁
隨著瀏覽器的蓬勃發展,現在網頁可以存取GPS、加速度計、照度計、麥克風、攝影機等等硬體訊號,還可以配合WebGPU、WebGL運行複雜的3D內容。

基於上述理由,網頁已可以成為遊戲機,手機瀏覽器甚至能像joy-con一般,作為搖桿使用,本書將帶領大家從頭打造一個可以使用手機遙控的派對遊戲。

寓教於樂
本書將帶領大家如何建立3D遊戲並透過手機即時遙控,藉由遊戲與技術的連結,讓讀者能夠從底層了解運作原理且不會枯燥乏味。

由淺入深
本書將依序介紹Vue、babylonjs、NestJS等等技術,讓讀者可以循序漸進的認識相關技術,接著整合這些技術與工具,透過功能與遊戲層層堆疊,最終淬鍊成一個完整的網頁應用程式。

 

作者

鱈魚(林昰辰)

機械、自動控制領域出身,在IoT概念普及後,一頭栽進前後端開發,熱衷於結合各類領域技術、開發酷酷的東西。

LinkedIn:
www.linkedin.com/in/shih-chen-lin-codfish
Youtube
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章 後記

序/導讀



「想要打造看看派對遊戲。」

這個點子從幾年前就一直在腦中打轉,一開始嘗試用MCU打造如joy-con的搖桿,雖然不是不行,但是設計電路、選電子零件、建構外殼到組裝結構等等步驟實在太麻煩,所以很快就棄坑了。(›´ω`‹ )

(絕對不是因為沒有朋友一起玩才棄坑,絕對不是。〒▽〒)

直到後來學了網頁開發,看到網頁技術的高速發展,同時看到手中有著多種感測器的手機,腦中閃過了新點子:「手機不就是一個現成的joy-con了嗎?」,於是打造派對遊戲這個點子有了新方向。

在各種偷懶與拖延的干擾下,派對遊戲還是成功誕生了!✧*。٩(ˊᗜˋ*)و✧*。

感謝深智數位的邀請,讓這個原先零散的專案擴增並集結成本書,還有總是鼓勵我搞些奇怪東東的父母與一直很支持我的老婆大人,即使我把家裡搞到跳電也沒把我轟出去,最後希望女兒趕快長大,趕快陪老爸玩Switch!(/≧▽≦)/

感謝翻開本書的各位讀者,希望你們會喜歡。( ´ ᗜ ` )ノ

 

配送方式

  • 台灣
    • 國內宅配:本島、離島
    • 到店取貨:
      金石堂門市 不限金額免運費
      7-11便利商店 ok便利商店 萊爾富便利商店 全家便利商店
  • 海外
    • 國際快遞:全球
    • 港澳店取:
      ok便利商店 順豐 7-11便利商店

詳細資料

詳細資料

    • 語言
    • 中文繁體
    • 裝訂
    • 紙本平裝
    • ISBN
    • 9786267383063
    • 分級
    • 普通級
    • 頁數
    • 752
    • 商品規格
    • 23*17*3.5
    • 出版地
    • 台灣
    • 適讀年齡
    • 全齡適讀
    • 注音
    • 級別

商品評價

訂購/退換貨須知

加入金石堂 LINE 官方帳號『完成綁定』,隨時掌握出貨動態:

加入金石堂LINE官方帳號『完成綁定』,隨時掌握出貨動態
金石堂LINE官方帳號綁定教學

提醒您!!
金石堂及銀行均不會請您操作ATM! 如接獲電話要求您前往ATM提款機,請不要聽從指示,以免受騙上當!

退換貨須知:

**提醒您,鑑賞期不等於試用期,退回商品須為全新狀態**

  • 依據「消費者保護法」第19條及行政院消費者保護處公告之「通訊交易解除權合理例外情事適用準則」,以下商品購買後,除商品本身有瑕疵外,將不提供7天的猶豫期:
    1. 易於腐敗、保存期限較短或解約時即將逾期。(如:生鮮食品)
    2. 依消費者要求所為之客製化給付。(客製化商品)
    3. 報紙、期刊或雜誌。(含MOOK、外文雜誌)
    4. 經消費者拆封之影音商品或電腦軟體。
    5. 非以有形媒介提供之數位內容或一經提供即為完成之線上服務,經消費者事先同意始提供。(如:電子書、電子雜誌、下載版軟體、虛擬商品…等)
    6. 已拆封之個人衛生用品。(如:內衣褲、刮鬍刀、除毛刀…等)
  • 若非上列種類商品,均享有到貨7天的猶豫期(含例假日)。
  • 辦理退換貨時,商品(組合商品恕無法接受單獨退貨)必須是您收到商品時的原始狀態(包含商品本體、配件、贈品、保證書、所有附隨資料文件及原廠內外包裝…等),請勿直接使用原廠包裝寄送,或於原廠包裝上黏貼紙張或書寫文字。
  • 退回商品若無法回復原狀,將請您負擔回復原狀所需費用,嚴重時將影響您的退貨權益。
※ 網友掛保證,絕不踩雷書單如下 ↓↓↓
預計 2025/09/20 出貨 參考庫存量:1 
金石堂門市 全家便利商店 ok便利商店 萊爾富便利商店 7-11便利商店
World wide
活動ing