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

學會「如何分析、解決問題等等技能」遠比「學會使用工具或某項技術」還重要
  • 9 621
    690

配送方式

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

內容簡介

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

 

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

 

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

 

【寓教於樂】

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

 

【由淺入深】

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

 

【設計與分析】

軟體開發領域的工程師一定都知道一個永遠不變的道理,就是「技術會不斷更新」。

 

本書在設計應用情境章節時,會先從需求分析、設計草稿開始,因為技術會變,但是設計與分析的過程基本上大同小異,學會「如何分析、解決問題等等技能」遠比「學會使用工具或某項技術」還重要。

 

作者

林昰辰

 

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

 

GitLab:

gitlab.com/pony2140

 

Youtube:

鱈魚

 

LinkedIn:

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

 

詳細資料

詳細資料

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

商品評價

訂購/退換貨須知

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

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

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

退換貨須知:

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

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