iT邦幫忙

quasar相關文章
共有 45 則文章
鐵人賽 Modern Web DAY 30

技術 D31 - 「來互相傷害啊!」:無聊我要見到血流成河

上競技場就是要決鬥阿,不然要幹嘛。 來讓人物發射武器!血流成河吧! 首先來回顧一下 D27 武器規劃。 主角武器 會與敵人發生碰撞 向下飛行、隨機旋轉 最...

鐵人賽 Modern Web DAY 30

技術 D30 - 「來互相傷害啊!」:貓狗集合!

有場景了,來讓人物登場吧!(≧∀≦) 首先將場景載入遊戲中。 src\components\window-app-cat-vs-dog\game-scene.v...

鐵人賽 Modern Web DAY 30

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

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

鐵人賽 Modern Web DAY 29

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

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

鐵人賽 Modern Web DAY 28

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

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

鐵人賽 Modern Web DAY 27

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

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

鐵人賽 Modern Web DAY 26

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

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

鐵人賽 Modern Web DAY 25

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

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

鐵人賽 Modern Web DAY 24

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

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

鐵人賽 Modern Web DAY 23

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

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

鐵人賽 Modern Web DAY 22

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

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

鐵人賽 Modern Web DAY 21

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

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

鐵人賽 Modern Web DAY 20

技術 D19 - 「吶,你想要成為什麼顏色?」:打造一個調色盤吧!

接下來我們要利用「 PWM」與「RGB LED」設計調色盤功能。 首先來認識一下新朋友 - 「RGB LED」 RGB LED 電子助教:「所以為甚麼要把三種...

鐵人賽 Modern Web DAY 19

技術 D18 -「脈衝×寬度×調變」:建立控制組件

再來就是實際建立透過 select 選擇的腳位,並建立相關 Firmata 功能。 建立 PWM 控制組件 規劃一下預期 UI 內容。 電子助教:「規劃個毛,...

鐵人賽 Modern Web DAY 17

技術 D16 - 「脈衝×寬度×調變」

這個章節要開始建立「PWM 輸出視窗」。 何謂 PWM 名為「脈衝寬度調變」(Pulse-width modulation)。PWM 本質上算是一種數位訊號,但...

鐵人賽 Modern Web DAY 16

技術 D15 - 「類比×電壓×輸入」:建立控制組件

再來就是實際建立透過 select 選擇的腳位,並建立相關 Firmata 功能。 (過程和建立 window-digital-io-item.vue 基本上相...

鐵人賽 Modern Web DAY 14

技術 D13 - 「類比×電壓×輸入」

接下來我們開始建立「類比輸入視窗」。 何謂類比訊號 和數位訊號只有 0 與 1 兩種狀態不同,類比訊號是連續的訊號,實際上自然界的物理量都屬於類比訊號,例如:聲...

鐵人賽 Modern Web DAY 13

技術 D12 - 「數位×IN×OUT」:建立控制組件

再來就是實際建立透過 select 選擇的腳位,並建立相關 Firmata 功能。 建立數位控制組件 稍微規劃一下預期 UI 內容。 建立 window-di...

鐵人賽 Modern Web DAY 11

技術 D10 - 「數位×IN×OUT」

電子助教:「這個標題...我聞到了停刊的味道... (́⊙◞౪◟⊙‵)」 這個章節開始我們要建立「數位功能 I/O 視窗」。 何謂數位訊號 簡單來說就是 0...

鐵人賽 Modern Web DAY 10

技術 D09 - 打開第一扇窗

現在有資料,只差介面了。 建立 base-window 組件 雖然每個視窗功能都不同,但是視窗外框功能都一樣,所以我們建立 base-window.vue 組件...

鐵人賽 Modern Web DAY 8

技術 D07 - 聽話,給我資料!

既然已經透過 Serial API 取得 Port 存取權限了,再來我們就要來接收並解析資料了。 建立資料收發模組 若每個需要串列通訊資料的地方都要寫一次讀取相...

鐵人賽 Modern Web DAY 7

技術 D06 - Web Serial API 初體驗

讓我們透過 Web Serial API 連接 COM 吧! 首先來建立頁面。 建立共用樣式 準備撰寫組件之前,先來建立一些全局共用的樣式變數與 Class。...

鐵人賽 Modern Web DAY 6

技術 D05 - 準備前端環境

接下來開始建立前端專案,接下來依序介紹預期使用的工具與套件。 工具與套件 Vue、Vuex 圖片來源:Vue 官方網站 Web 前端框架,相較其他兩大框架(R...

鐵人賽 Modern Web DAY 29

技術 [Day 29] Vue Quasar 多國語系 I18n

今天來談談多國語系I18n,能夠讓你輕鬆將網站的內容替換成其他語言。 那為什麼叫做I18n這個奇怪的名字? 其實就是Internationalization的,...

鐵人賽 Modern Web DAY 23

技術 [Day 23] Vue Quasar 彈跳視窗 3 - Modal

眾所週知的彈跳視窗 Modal Modal 看到這個名字,有玩過Bootstarp的同學應該都不陌生,沒錯就是以前的那個modal啦,在Quasar有這麼多彈跳...

鐵人賽 Modern Web DAY 22

技術 [Day 22] Vue Quasar 彈跳視窗 2 - Dialog

就用這個取代傳統alert吧 Dialog Quasar的dialog也是做得跟手機原生的很像,一樣也是material及iOS兩種風格喔。基本上裡面除了放文字...

鐵人賽 Modern Web DAY 21

技術 [Day 21] Vue Quasar 彈跳視窗 1 - Action Sheet

下方的彈出選單 Action Sheet Action Sheet 這是一個從螢幕下方彈跳出小選單的元件 在Android及iOS上也都有類似的原生元件 不過如...

鐵人賽 Modern Web DAY 20

技術 [Day 20] Vue Quasar 表單元件 9 - Knob (旋轉鈕?)

不知不覺就20天啦,感覺又回到了國高中的年代,每天都有作業要寫~有時候下班累得要死,還是要趕一篇出來 xD。文章寫到這個階段,整個框架的元件也都快介紹完了呢,不...

鐵人賽 Modern Web DAY 19

技術 [Day 19] Vue Quasar 表單元件 8 - Editor (文章編輯)

內建的文章編輯器 Editor Editor (WYSIWYG) 有些後台需要讓使用者編輯文章,原本都會有點頭痛,又要去找插件來放了~~好在他也有內建的文章編輯...

鐵人賽 Modern Web DAY 18

技術 [Day 18] Vue Quasar 表單元件 7 - Datetime

輕鬆變出時間日期輸入框Datetime 今天有一個表單要給使用者輸入基本資料 填著填著就來到了生日的欄位 這時候為了怕使用者格式亂填 在過去我們會去找datep...