內文簡介
＜內容簡介＞

原來網頁還可以這樣玩？融合電子電路與網頁，一起打造有趣的遊戲吧！

本書內容改編自【第13屆】2021 iThome 鐵人賽，Modern Web 組佳作網路系列文章 ──《你渴望連結嗎？將 Web 與硬體連上線吧！》。

隨著瀏覽器支援的 Web API 越來越豐富，有一天我注意到了「Web Serial API」這個神奇的東東。以往 JS 沒有權限能夠存取作業系統底層 API，所以要進行串列通訊都需要一個中介伺服器轉送資料，但是透過 Web Serial API 就可以直接透過瀏覽器進行串列通訊了！於是這個主題就這麼誕生了。

【寓教於樂】
本書應用情境將以各類遊戲為主，了解電子訊號如何與遊戲結合。透過遊戲與技術的連結，讓讀者能夠從底層了解運作原理且不會枯燥乏味。

【由淺入深】
本書將依序介紹 Vue、Quasar、Firmata、各類電路等等技術，讓讀者可以循序漸進的認識相關技術，並整合這些技術、設計情境，透過一層一層堆疊，最終淬鍊出一個完整的應用程式。

【設計與分析】
軟體開發領域的工程師一定都知道一個永遠不變的道理，就是「技術會不斷更新」。
本書在設計應用情境章節時，會先從需求分析、設計草稿開始，因為技術會變，但是設計與分析的過程基本上大同小異，學會「如何分析、解決問題等等技能」遠比「學會使用工具或某項技術」還重要。

★目錄：

Chapter 01 萬事起頭難
1.1 電壓與電流
1.2 微控制器
1.3 Firmata
1.4 串列通訊（Serial communication）
1.5 Web Serial API
1.6 前端框架

Chapter 02 Hello Firmata
2.1 集結硬體小夥伴
2.2 燒入Firmata 韌體
2.3 一起看懂通訊協定

Chapter 03 建立前端地基
3.1 TypeScript 簡介
3.2 TypeScript 入門
3.2.1 基礎型別
3.2.2 介面
3.2.3 函數
3.3 介紹開發工具與套件
3.3.1 Visual Studio Code
3.3.2 Vue
3.3.3 Pinia
3.3.4 Quasar
3.3.5 Tailwind CSS
3.3.6 Lodash
3.3.7 Day.js
3.3.8 Vite
3.4 建立專案

Chapter 04 Web Serial API 初體驗
4.1 建立 Port 設定對話框
4.2 建立資料收發模組
4.3 建立 Firmata 功能
4.4 儲存並顯示 Firmata 資料
4.5 今晚，我想來點「腳位清單」加「功能模式」，配「類比映射表」
4.5.1 取得腳位與功能
4.5.2 取得類比腳位映射表

Chapter 05 打開第一扇窗
5.1 建立 base-window 元件
5.2 建立範例視窗
5.3 自動調整堆疊順序
5.4 關閉視窗

Chapter 06 數位×IN×OUT
6.1 何謂數位訊號
6.2 建立 Firmata 轉換工具
6.3 建立數位 I/O 視窗
6.4 建立腳位選擇器
6.5 數位訊號
6.5.1 數位輸入（Digital Input）
6.5.2 數位輸出（Digital Output）
6.5.3 上拉輸入（Input Pullup）
6.6 硬體實作
6.6.1 準備零件
6.6.2 檢查硬體
6.6.3 連接電路
6.6.4 補充說明
6.7 建立數位控制元件
6.7.1 數位輸出
6.7.2 數位輸入

Chapter 07 類比× 電壓× 輸入
7.1 何謂類比訊號
7.2 建立類比輸入視窗
7.3 加入視窗內容
7.4 類比輸入（Analog Input）
7.5 硬體實作
7.5.1 準備零件
7.5.2 檢查硬體
7.5.3 連接電路
7.6 建立類比輸入控制元件

Chapter 08 來互相傷害啊！
8.1 認識 Phaser
8.1.1 Game
8.1.2 Scene
8.1.3 Sprite
8.1.4 Animations
8.2 規劃遊戲：貓狗大戰
8.2.1 歡迎場景
8.2.2 主場景
8.2.3 結束場景
8.3 建立視窗
8.4 認識搖桿
8.5 建立設定欄位
8.6 處理搖桿訊號
8.6.1 建立按鈕物件
8.6.2 建立搖桿物件
8.7 打造遊戲！
8.7.1 載入素材
8.7.2 歡迎來到貓狗大戰
8.7.3 遊戲開打
8.7.4 遊戲結束

＜作者簡介＞

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

GitLab：
https://gitlab.com/pony2140
Youtube：
https://www.youtube.com/user/pony2140/playlists
LinkedIn：
https://www.linkedin.com/in/shih-chen-lin-codfish

相關分類

購物須知

寄送時間	全台灣24h到貨，遲到提供100元現金積點。全年無休，週末假日照常出貨。例外說明
送貨方式	透過宅配送達。除網頁另有特別標示外，均為常溫配送。消費者訂購之商品若經配送兩次無法送達，再經本公司以電話與Email均無法聯繫逾三天者，本公司將取消該筆訂單，並且全額退款。
送貨範圍	限台灣本島與離島地區註，部分離島地區包括連江馬祖、綠島、蘭嶼、琉球鄉…等貨件，將送至到岸船公司碼頭，需請收貨人自行至碼頭取貨。注意！收件地址請勿為郵政信箱。註：離島地區不配送安裝商品、手機門號商品、超大材商品及四機商品。
售後服務	缺掉頁更換新品
執照證號＆登錄字號	本公司食品業者登錄字號A-116606102-00000-0

關於退貨

PChome24h購物的消費者，都可以依照消費者保護法的規定，享有商品貨到次日起七天猶豫期的權益。(請留意猶豫期非試用期!!)您所退回的商品必須回復原狀（復原至商品到貨時的原始狀態並且保持完整包裝，包括商品本體、配件、贈品、保證書、原廠包裝及所有附隨文件或資料的完整性）。商品一經拆封/啟用保固，將使商品價值減損，您理解本公司將依法收取回復原狀必要之費用(若無法復原，費用將以商品價值損失計算)，請先確認商品正確、外觀可接受再行使用，以免影響您的權利，祝您購物順心。
如果您所購買商品是下列特殊商品，請留意下述退貨注意事項：
1. 易於腐敗之商品、保存期限較短之商品、客製化商品、報紙、期刊、雜誌，依據消費者保護法之規定，於收受商品後將無法享有七天猶豫期之權益且不得辦理退貨。
2. 影音商品、電腦軟體或個人衛生用品等一經拆封即無法回復原狀的商品，在您還不確定是否要辦理退貨以前，請勿拆封，一經拆封則依消費者保護法之規定，無法享有七天猶豫期之權益且不得辦理退貨。
3. 非以有形媒介提供之數位內容或一經提供即為完成之線上服務，一經您事先同意後始提供者，依消費者保護法之規定，您將無法享有七天猶豫期之權益且不得辦理退貨。
4. 組合商品於辦理退貨時，應將組合銷售商品一同退貨，若有遺失、毀損或缺件，PChome將可能要求您依照損毀程度負擔回復原狀必要之費用。
若您需辦理退貨，請利用顧客中心「查訂單」或「退訂/退款查詢」的「退訂/退貨」功能填寫申請，我們將於接獲申請之次日起1個工作天內檢視您的退貨要求，檢視完畢後將以E-mail回覆通知您，並將委託本公司指定之宅配公司，在5個工作天內透過電話與您連絡前往取回退貨商品。請您保持電話暢通，並備妥原商品及所有包裝及附件，以便於交付予本公司指定之宅配公司取回（宅配公司僅負責收件，退貨商品仍由特約廠商進行驗收），宅配公司取件後會提供簽收單據給您，請注意留存。
退回商品時，請以本公司或特約廠商寄送商品給您時所使用的外包裝（紙箱或包裝袋），原封包裝後交付給前來取件的宅配公司；如果本公司或特約廠商寄送商品給您時所使用的外包裝（紙箱或包裝袋）已經遺失，請您在商品原廠外盒之外，再以其他適當的包裝盒進行包裝，切勿任由宅配單直接粘貼在商品原廠外盒上或書寫文字。
若因您要求退貨或換貨、或因本公司無法接受您全部或部分之訂單、或因契約解除或失其效力，而需為您辦理退款事宜時，您同意本公司得代您處理發票或折讓單等相關法令所要求之單據，以利本公司為您辦理退款。
本公司收到您所提出的申請後，若經確認無誤，將依消費者保護法之相關規定，返還您已支付之對價（含信用卡交易），退款日當天會再發送E-mail通知函給您。

Arduino自造趣：結合 JavaScript x Vue x Phaser 輕鬆打造個人遊戲機（iThome鐵人賽系列書）

搜尋更多

內文簡介

相關分類