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

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

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

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 遊戲結束