本系列文已改編成書「Arduino 自造趣：結合 JavaScript x Vue x Phaser 輕鬆打造個人遊戲機」，本書改用 Vue3 與 TypeScript 全面重構且加上更詳細的說明，

在此感謝 iT 邦幫忙、博碩文化與編輯小 p 的協助，歡迎大家前往購書，鱈魚在此感謝大家 (｡･∀･)。

若想 DIY 卻不知道零件去哪裡買的讀者，可以參考此連結 。( •̀ ω •́ )✧

大家好我是鱈魚，歷年來看了很多屆鐵人賽，今年終於鼓起勇氣填坑參賽了。

回想自身技術發展歷程，還真的是個奇幻旅程。

大學是機械、自動控制工程出身，頂多旁聽過資工的課程，對於程式的理解是 printf("Hello World\n")，而網站開發的認識則停留在 Dreamweaver。

因為要透過單晶片控制致動器、連接感測器，所以從 C 開始學，後來因為常常被問「所以我說那個 UI 呢？」

所以嘗試了 C#、Qt、Java，後來因為參加比賽需要網頁展示，從此開了新坑。

乾騙我 ( ´•̥̥̥ ω •̥̥̥` )

就這麼一直到了現在，覺得 HTML、CSS 的介面表現能力真的很不錯，日新月異的前端技術幾乎讓 Web 無所不能（Lottie、GLSL、Three.js、TensorFlow.js 以及各種 Web API）。

前端技術的演進推薦看看下面這些文章，深入淺出的道出前端發展歷程，相當值得一看。

跟著小明一起搞懂技術名詞：MVC、SPA 與 SSR
零基礎的小明要如何成為前端工程師？

隨著瀏覽器支援的 Web API 越來越豐富，有一天我注意到了「Web Serial API」這個神奇的東東。

以往 JS 沒有權限能夠存取作業系統底層 API，所以要做串列通訊都需要一個中介伺服器轉送資料，但是透過 Web Serial API 就可以直接透過瀏覽器進行串列通訊了！於是這個主題就這麼誕生了。

接下來的 30 天，我將嘗試透過 Web Serial API 與單晶片直接連結並將電訊號轉換成 UI 展示，最後在網頁上開發遊戲，透過實體電路的按鈕、搖桿遊玩！

請大家多多指教嘍！

若內容有誤，請不要告訴我 (ﾟ∀。)，請鞭小力一點，我會馬上修訂。