iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

你渴望連結嗎?將 Web 與硬體連上線吧! 系列

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

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

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

請大家多多指教嘍!

鐵人鍊成 | 共 33 篇文章 | 29 人訂閱 訂閱系列文 RSS系列文
DAY 21

D20 - 「吶,你想要成為什麼顏色?」:將色彩傳下去

這個章節來實作彩球組件,讓使用者可以選擇顏色。 建立顏色控制器 建立 color-ball.vue 組件。 src\components\window-app...

2021-10-04 ‧ 由 鱈魚 分享
DAY 22

D21 - 「不斷線的侏儸紀」:萃取 DNA

這個章節開始我們要重現 Chrome 瀏覽器離線時出現的小遊戲「Dinosaur Game」,首先來好好規劃一下遊戲的藍圖。 視窗規劃 視窗主體 負責提供腳...

2021-10-05 ‧ 由 鱈魚 分享
DAY 23

D22 - 「不斷線的侏儸紀」:很久很久以前的侏儸紀

本篇來實際建立遊戲場景! 建立遊戲場景 建立遊戲場景組件 game-scene.vue,並提供「跳躍按鈕腳位」與「蹲下按鈕腳位」之 props。 src\com...

2021-10-06 ‧ 由 鱈魚 分享
DAY 24

D23 - 「不斷線的侏儸紀」:有一隻小恐龍在跑步

來建立我們的主角小恐龍吧。 建立組件 建立小恐龍組件 dino.vue src\components\window-app-google-dino\dino.v...

2021-10-07 ‧ 由 鱈魚 分享
DAY 25

D24 - 「不斷線的侏儸紀」:天上好多雲、地上一堆仙人掌

小恐龍跑啊跑,悠閒地看著天上的雲朵飄過,但是眼前忽然出現了一株仙人掌。 天上好多雲 建立雲朵組件 建立 clouds.vue 組件,負責生成雲朵。 src\co...

2021-10-08 ‧ 由 鱈魚 分享
DAY 26

D25 - 「不斷線的侏儸紀」:然後他就死掉了

小恐龍現在就像吃了無敵星星一樣,完全無視仙人掌,所以我們來讓小恐龍死翹翹吧! 撞上仙人掌 我們來加上「小恐龍」與「仙人掌」的碰撞偵測。 這裡我們使用最簡單「矩形...

2021-10-09 ‧ 由 鱈魚 分享
DAY 27

D26 - 「來互相傷害啊!」:站在 Phaser 的肩膀上

鱈魚:「再來要設計對戰遊戲,可以切換場景,人物可以在場地隨意移動,發射武器互相攻擊,人物會與牆壁、敵人武器等等發生碰撞。」 電子助教:「感覺好多內容啊,好麻煩喔...

2021-10-10 ‧ 由 鱈魚 分享
DAY 28

D27 - 「來互相傷害啊!」:運籌帷幄

來規劃遊戲藍圖吧。 視窗規劃 基本上和小恐龍單元一樣。 視窗主體 負責提供腳位資料、設定欄位。 遊戲場景 包含所有遊戲角色等等。 不過設定欄位要怎麼...

2021-10-11 ‧ 由 鱈魚 分享
DAY 29

D28 - 「來互相傷害啊!」:粗乃玩搖桿!

先建立遊戲組件,以便加入後續內容。 src\components\window-app-cat-vs-dog\game-scene.vue <templa...

2021-10-12 ‧ 由 鱈魚 分享
DAY 30

D29 - 「來互相傷害啊!」:天時地利

互毆之前當然要先有場地才行,讓我們建立 Phaser 場景吧! 建立場景 首先建立 src\components\window-app-cat-vs-dog\s...

2021-10-13 ‧ 由 鱈魚 分享