想要探索 Vue 前端框架嗎?本次的圈圈叉叉範例可以帶你一同進入 Vue 世界中,認識前端框架的強大與方便之處。圈圈叉叉是我們每個人小時候都有玩過的遊戲,規則簡單易上手,在本次範例中會實作出以下功能:
- 透過 Vue 產生九宮格的框框,當玩家點擊時會顯示出圈圈叉叉
- 遊戲過程中系統會不斷比對資料,找尋是否有贏家產生,當有贏家產生時會顯示出哪一方勝利
- 可將遊戲畫面清除,重新開始進行一局新的遊戲
- 顯示當下該輪到哪一位玩家進行出手
在開始製作之前你該知道的 Js 操作與 Css 屬性
Js操作:
Css排列版面的利器flex
- display: flex:預設會將子層水平排列不斷行
- flex-wrap: nowrap | wrap | wrap-reverse 預設為 nowrap,超過寬度的子元素是否換行
- flex-direction: row | row-reverse | column | column-reverse 主軸線的元素排列方向,預設為橫向順排 row
- justify-content: 元素在主軸上排列的方式
- align-items: 元素在副軸上排列的方式
事前準備
在Code Pen上開一個新的pen,將HTML的預處理器設定成Pug、CSS的預處理器設定成Sass、JS的CDN掛入Vue。
1. 用CSS建立外框線以及圈圈圖示
首先建立名稱為 size
的 mixin,可以讓後續在使用上比較方便,像是繪製框線。
//HTML .block
//CSS @mixin size($w, $h:$w) width: $w height: $h .block +size(150px) border: solid 1px
接著要來建立框線以及繪製圈圈的圖示,在繪製圈圈圖示上,會使用擬元素 before
與 after
,這裡可以嘗試在 content 中加上符號來顯示看看效果。不過如果沒有要顯示字元的話,像是本次範例所要的是畫幾何圖形,一樣需要加上 content,雙引號中間空白無文字,不可直接省略。
//HTML .block .block.circle
//CSS @mixin size($w, $h:$w) width: $w height: $h .block +size(150px) border: solid 1px &.circle &:after, &:before content: "" display: block
不管是圈圈與叉叉,都是由 :after
與 :before
這兩個偽元素左組成,在圈圈上,是兩個圓形疊在一起所產生視覺效果,透過將中間的圓圈所設定的顏與背景顏色相同,這樣看上去可產生甜甜圈形狀也就是圓形的效果。
這邊要注意的是,由於在圖層的排列順序上,:after
是在 :before
之上,所以比較大的圓是要寫在 :before
上,而中間的小圓則是寫在 :after
上。
在圓形的置中設定上,先將 :after
與 :before
設定成絕對定位,而由於絕對定位的位置規則是會透過尋找上層非 static 的區塊,當作定位的起始點。為了使 .circle
當成定位起的點,所以在母元素 .circle
加上相對定位 position: relative
。接著以左上角為參考點,向右以及向下各移動 50% ,再向上以及向左移動本身一半的長度 (transform: translate(-50%, -50%)
),這樣一來就完成置中了。
//CSS $color_blue: #46f $color_red: #f35 $color_bg: #222 @mixin size($w, $h:$w) width: $w height: $h html, body background-color: $color_bg margin: 0 +size(100%) .block +size(150px) border: solid 1px &.circle position: relative &:after, &:before content: "" display: block border-radius: 50% position: absolute left: 50% top: 50% transform: translate(-50%, -50%) &:before +size(90%) background-color: $color_red &:after +size(60%) background-color: $color_bg
![井字圈叉遊戲:步驟一,建立外框線及圈圈](https://creativecoding.in/wp-content/uploads/2021/08/井字圈叉遊戲-1.png)
2. 繼續使用CSS完成叉叉圖示
完成圈圈後,接著來做叉叉。
為了測試方便,所以就先以滑鼠移入區域,也就是 :hover
的方式來寫叉叉的效果。叉叉是由兩條長方形所組成的,所以將 size
的比例改成長方形,也將圓角設定變為 0px。
將長方形個別旋轉正負 45 度,形成交錯的叉叉,這邊可以發現,除了旋轉 (rotate
) 之外,也保留了在圓形中所設定的移動 (translate
)。原因在於,transform
會複寫掉前面的屬性,為了達到與圈圈一樣的效果,所以也必須指定移動的效果。
此時滑鼠移入有叉叉的效果了,但是切換時很生硬,要達成柔順切換的效果,只要在 &:after, &:before
上加上transition: 0.5s
就可以了。
//CSS &:after, &:before content: "" display: block position: absolute left: 50% top: 50% transform: translate(-50%, -50%) transition: 0.5s // 圈叉變化時間 0.5秒 &:hover // 與 .circle 同一層級 &:after, &:before +size(90%, 15%) background-color: $color_blue border-radius: 0px &:before transform: translate(-50%, -50%) rotate(45deg) &:after transform: translate(-50%, -50%) rotate(-45deg)
![井字圈叉遊戲:步驟二,滑鼠hover移上會轉成叉叉](https://creativecoding.in/wp-content/uploads/2021/08/井字遊戲-叉叉hover.gif)
3. 調整圈叉的共用CSS屬性
在叉叉測試測試完畢後,由於剛剛 hover 只是用來測試,使用 hover 模擬沒問題後,就將其改為 .cross
,並在 html 新增 .cross
的元素。
//HTML .block .block.circle .block.cross
//CSS .block +size(150px) border: solid 1px position: relative &:after, &:before //change the after and before position content: "" display: block position: absolute left: 50% top: 50% transform: translate(-50%, -50%) transition: 0.5s &.circle &:after, &:before border-radius: 50% &:before +size(90%) background-color: $color_red &:after +size(60%) background-color: $color_bg &.cross &:after, &:before +size(90%, 15%) background-color: $color_blue border-radius: 0px &:before transform: translate(-50%, -50%) rotate(45deg) &:after transform: translate(-50%, -50%) rotate(-45deg)
![井字圈叉遊戲:步驟三,調整圈叉的共用CSS屬性](https://creativecoding.in/wp-content/uploads/2021/08/井字圈叉遊戲-3.png)
4. 進入 Vue.js 世界,綁定建立的樣式
在正式進入 Vue.js 的世界前,我們先模擬使用 jQuery的情況 ,在Console中嘗試新增以及拿掉元素上的 class。
//Console // 抓取 .block.circle,有 circle 這個 class 就將其拿掉 $(".block.circle").toggleClass("circle") // 抓取 .block,無 circle 這個 class 就加上去 $(".block").toggleClass("circle")
假如使用 jQuery 來寫的話,首先會先建立一個長度為 9 的陣列 (var blocks = [1,0,-1]
),裡面放置的數字分別代表每一個格的狀態,比如說 1 代表圈圈、-1 代表叉叉、0 代表空,有了這些一串數字後,再根據數字去新增與刪減 Class。
這樣可以達到效果沒錯,但是如果可以當資料更新的時候,外觀也就自動更新,不需要自己再去新增與刪除 Class 的話,會是更好的方法,而我們接下來要使用的 Vue 便可以完成這部分。
在使用 Vue 的起手式上,首先需要一個溝通橋梁,類似搬運工的角色,名為 vm
,接著要定義作用的範圍,設定為 el: "#app"
,而在 HTML 最外面一層上加上 #app
。這樣就連接完畢,接下來在 Vue 中所做的資料更新都會做用到整個 HTML 上。
接下來要做的功能是,根據在 Js 中的資料,來判定在 HTML 上的元素要不要加上相對應的 Class。先處理 Vue 的部分,由於所設定的是資料相關,所以要擺放在 data{}
之中,裡面新增一個物件, key 為 blocks
,value 為 { type: -1 }
。
接著來到 HTML,在切換 Class 上,需要 v-bind
這個標籤,它是用來綁定與參數相關的,像是Class、href 就會使用它。後面雙引號部分則是來決定要加上的 Class 以及可否能加的條件 ("{ Class : 成立條件 }"
),這裡的 Class 不僅可設定一個,也可以是多個,只需要以逗號相隔開來即可。所以下方 HTML 中所代表的是,如果 type 是 1 的話,那就加上圈圈,而如果 type 是 -1 的話,那就加上叉叉。大家可以利用Console嘗試更新 blocks: { type: -1 }
中 type 數字(輸入 vm.blocks.type=1或0或-1
),來觀察外觀上的變化。
//JS var vm = new Vue({ el: "#app", data: { blocks: { type: -1 }, } });
//HTML #app .block(v-bind:class="{ circle: blocks.type == 1, cross: blocks.type == -1 }") //刪除先前的.block.circle及.block.cross
5. 用 Vue.js 的 Array 產生九個框框
在前一個步驟,完成了最左上角的單一方塊在外觀與資料的連結,但是圈圈叉叉是九宮格,所以老闆使用 Array.from
來產生九個 { type: 1 }
並存放到 Blocks 中,讓 Blocks 是長度為九的陣列。
接著我們來到了 HTML,回想起當需要存取陣列的每一個元素時,就使用迴圈,而迴圈中所設置的變數可依據需求自行定義,而在 Vue 中也是相同的概念,透過 v-for
來存取陣列中的每一個元素,使用方式為 v-for="自訂義名稱 in 陣列"
,由於 blocks 長度是九,所以 Vue 就會在畫面上產生九個.block
元素,在這裡老闆使用了 block 來當作識別的變數,所以在判斷 Class 上名稱就是使用 block.type == 1
,來判斷每一個 Block 所設置的 type 是不是等於 1。
由於現在設定上都是圈圈 (type: 1
),老闆後來改以隨機變數的方式產生 -1、0、1 ( type: 1 - parseInt(Math.random() * 3)
),這樣一來畫面上不同方格就會各自呈現不同的形狀。
//JS var vm = new Vue({ el: "#app", data: { blocks: Array.from({ length: 9 }, function () { return { type: 1 } }) } });
//HTML #app .block(v-for="block in blocks", v-bind:class="{circle: block.type == 1, cross:block.type == -1}")
v-for與v-bind的差別:v-for用來產生陣列裡的多個複製物,並存取或綁定陣列中的各個元素,v-bind:屬性可將符合條件的單個元素綁定屬性
![井字圈叉遊戲:步驟五,用 Vue.js 的 Array 產生九個框框](https://creativecoding.in/wp-content/uploads/2021/08/井字圈叉遊戲-5.png)
6. 調整HTML及CSS排列成為九宮格
在步驟五,透過 v-for
自動產生九個方塊了,在方塊中也隨機擺放著不同的符號。不過在圈圈叉叉的設置上是水平三格與垂直三格所組成的九宮格,因此要在這組 .block
上再新增一個母元素取名為 .block_area
,用來規範整個九宮格的大小與位置。我們首先在每個框框中加入編號:
//HTML #app .block_area .block(v-for="(block,bid) in blocks", v-bind:class="{circle: block.type == 1, cross:block.type == -1}") .small_number {{ bid+1 }}
在 css 的設定上,由於裡面的框框預設上的寬高都是 150px,所以在外框的寬度上就乘上 3 倍。在排列方式上使用 flex,在預設上是當母元素也就是 .block_area
加上 flex
後,下層的子元素 .block
就會依序由左向右排列且不換行。為了達成換行的效果,會需要加上 flex-wrap: wrap
,這樣當寬度超過時,子元素就會自己自動往下排列了。
//CSS .block_area +size(150px*3) display: flex flex-wrap: wrap
![井字圈叉遊戲:步驟六,調整HTML及CSS排列成為九宮格](https://creativecoding.in/wp-content/uploads/2021/08/井字圈叉遊戲-6.png)
結果此時會發現還是不太對,確實有往下排列了沒錯,但是卻以兩格兩格的方式排列。原因在於,在預設上每一個元素的寬度 = Set width + border + padding,以現在的框框來說就會是 150px +1px*2 = 152px,所以當排列到第三個框框時就會超出範圍,自然地就會向下排來排列。為了要讓指定的寬度 150px 涵蓋 border 的寬度,那就要再加上 box-sizing: border-box
就可以囉。
//CSS .block +size(150px) border: solid 1px rgba(white, 0.2) position: relative box-sizing: border-box
![](https://creativecoding.in/wp-content/uploads/2021/08/井字圈叉遊戲-6-2.png)
7. Vue.js中設定重新開始
要如何設定所有物件重置呢?回想一下在第五步驟中,提到框框中的圖形是根據 type 的數字來做變化的,所以要將畫面清空,僅需要將數值統一設定為零即可。然而將清空畫面屬於動作,是需要視情況不斷執行的,所以要將重置的設定寫在 methods 中。
設定好後,會發現畫面上的方格都消失了,原因在於一開始 Vue 的元件建立後,並不會自動執行寫在 methods 中的函式,為了讓元件建立後就初始化將每個方格方格設定為空,必須在 mounted()
也就是 Vue 初始化剛完成時,執行 restart()
函式。
//JS var vm = new Vue({ el: "#app", data: { blocks: [], }, mounted() { this.restart() }, methods: { restart() { this.blocks = Array.from({ length: 9 }, function () { return { type: 0 } }) } } });
8. 點擊後下棋
設定好九宮格初始化的格式後,就要來使用滑鼠點擊。前面有提到,在 Vue.js 中與樣式有關的會使用 v-bind
,而點擊是動作,這與事件有關則是使用 v-on。所以要達成當點擊框框內後會呈現圈圈的語法如下 v-on:click="block.type=1"
,表示當偵測到點擊時,就把 type 設定為 1 ,也就是圈圈的形式。此時會發現不管點擊畫面上哪一位置都會變成圈圈。
//HTML #app .block_area .block(v-for="(block,bid) in blocks", v-bind:class="{circle: block.type == 1, cross:block.type == -1}" v-on:click="block.type=1") .small_number {{ bid+1 }}
確定點擊效果沒問題後,接著來製作輪流下棋。輪流就是將 type 一開始設定為 1,再來就是 -1,並接續輪流交替,由於數值的切換是動作,所以透過將 v-on:click
後面包成一個動作 player_go(block)
,讓設定的細節到 Vue 中函式做處理。每當有方塊偵測到點擊時,就會傳送當下被點擊方塊設定 type,並且會交替的更換 turn 的數值,讓 turn 在 1 與 -1 兩者之間交替。可以注意到,在 data 中新增了資料 turn: 1
,代表遊戲開始是由圈圈這方開始,若遊戲要從叉叉開始,那只要改為 turn: -1
就可以囉。
//HTML #app .block_area .block(v-for="(block,bid) in blocks", v-bind:class="{circle: block.type == 1, cross:block.type == -1}" v-on:click="player_go(block)") .small_number {{ bid+1 }}
//JS var vm = new Vue({ el: "#app", data: { blocks: [], turn: 1 }, mounted() {... }, methods: { restart() {... }, player_go(block) { block.type = this.turn this.turn = -this.turn } } });
9. 顯示下棋者
在與九宮格同一的層級之下,新增一個 .block.small
的元素,另外會在綁定 vue 中的資料 turn,這樣一來加上相對應的 Class。另外,由於這只是作為提示框而非遊戲操作部分,所以將格子縮小會比較好看一些。
//HTML #app .block_area ... .block.small(v-bind:class="{circle: turn == 1, cross: turn == -1}")
//CSS .block +size(150px) border: solid 1px rgba(white, 0.2) position: relative box-sizing: border-box &.small //縮小格子 +size(60px)
![井字圈叉遊戲:步驟九,顯示下棋者](https://creativecoding.in/wp-content/uploads/2021/08/井字圈叉遊戲-9.png)
10. 理出邏輯,再用Vue.js判斷贏家
本小節是此範例中最核心也是最有挑戰的的地方:要如何判斷有贏家產生,而贏家又是哪一方呢?以下先用圖示講解觀念,再著手進入程式。
![](https://creativecoding.in/wp-content/uploads/2021/08/井字圈叉遊戲-10-說明.jpg)
在畫面上,每一格都有相對應的數值,圈圈是 1,叉叉是 -1,而都沒有劃記則是 0,那可以得知只要有某一條線的所有數值相加起來為 3 或是 -3 ,這就代表有連成一線。接著要考慮可連成一線的方式有哪些情況,下面以格子的數字做為表示,一共有八種情況,分別是 123 / 456 / 789 / 147 / 258 / 369 / 159 / 357,每當有玩家點選方格時,便會依序檢查上述八種情況的任一是否有連線成功。
接著在進入撰寫連線的程式前,先來認識在 Vue 中新的小夥伴 – computed,它會自動監看在 Vue 中的數值是否有更動了。當有內部有數值更新時,所設定的屬性也會隨之更新。下面以 user() 作為範例,當數值 turn 改變時, user() 所計算過後回傳的值也會改變,而這個值可放在 HTML 中來使用。
//JS var vm = new Vue({ ... methods: { restart(){... }, player_go(block) {... }, computed:{ user(){ return this.turn == 1? "O'turn" : "X'turn" } } } })
//HTML #app h1 {{ user }} ...
![井字圈叉遊戲:步驟十,顯示出輪到誰下棋](https://creativecoding.in/wp-content/uploads/2021/08/井字圈叉遊戲-10-2.png)
接下來就要開來寫連線判定的部分囉,先將前面所提到的連線情況存成一組字串,接著透過字串分割的方式形成陣列,並回傳數值顯示在畫面上:
//JS computed:{ pattern_data(){ var verify_list = "123,456,789,147,258,369,159,357" var result = verify_list.split(",") return result } }
//HTML #app h1 {{ pattern_data }} ...
![井字圈叉遊戲:步驟十,寫贏家判斷列](https://creativecoding.in/wp-content/uploads/2021/08/井字圈叉遊戲-10-3.png)
為了可以顯示出每一個格子的序號與相對狀態,所以在原本顯示狀態的 type 之上加上屬性 id,由於程式是由 0 開始,格子的序號是由 1 開始,所以 id = i +1。
//JS restart(){ this.blocks = Array.from({ length: 9 }, function (d,i) { return { id: i+1, // 新增序號 type: 0 } }) },
這樣子九宮格所呈現的資料會是如下,總共九個物件,每一個物件都會有相對應 id
以及 type
。
[ { "id": 1, "type": 0 }, { "id": 2, "type": 0 }, { "id": 3, "type": 0 }, { "id": 4, "type": 0 }, { "id": 5, "type": 0 }, { "id": 6, "type": 0 }, { "id": 7, "type": 0 }, { "id": 8, "type": 0 }, { "id": 9, "type": 0 } ]
回到 pattern_data()
,依據剛剛所列出的驗證組合,取出相對應的物件,比如說:
[ { "id": 1, "type": 0 }, { "id": 2, "type": 0 }, { "id": 3, "type": 0 }]
在陣列的轉換上使用 map
,以 vtext
來代表每一項驗證的組合。由於是要將長度九的陣列依照條件轉換成各個長度為三的陣列,透過使用 filter
來進行來過濾,過濾的條件則是察看序號是否相同,這裡使用到 indexOf
,若有相同數值會回傳 1,否則則會回傳 -1 。
取出陣列組合後,可以點擊看看九宮格,確認 type
的是數值是會有變化的,而這個數值就是用來相加並進行判斷的,再次使用 map 來取出陣列中 type
數值的部分,並且透過 reduce
來計算三個數值相加總合。
//JS var verify_list = "123,456,789,147,258,369,159,357" var result = verify_list.split(",") .map((vtext)=>{ var add = this.blocks .filter((d, i) => vtext.indexOf(i + 1) != -1) .map((d) => d.type) .reduce((a, b) => (a + b), 0); return add; }) return result
下方圖片標示出在做完每一項操作後,所產生出的結果。
![井字圈叉遊戲:步驟十,.filter() 過濾出驗證的陣列](https://creativecoding.in/wp-content/uploads/2021/08/井字圈叉遊戲-10-4-1024x656.png)
![井字圈叉遊戲:步驟十,.map() 數值 tpye](https://creativecoding.in/wp-content/uploads/2021/08/井字圈叉遊戲-10-5.png)
![井字圈叉遊戲:步驟十,.reduce() 相加數值](https://creativecoding.in/wp-content/uploads/2021/08/井字圈叉遊戲-10-6.png)
目前有個每一個驗證規則的數值加總,但是只需要回傳贏家的判斷即可,也就是 3 (三個圈成一線)與 -3 (三個叉成一線),所以使用到 .filter()
,判斷條件為只要絕對值等於 3 就代表有贏家產生了。除了知道有贏家外,也希望可以知道是哪一條線成立的,所以在回傳值的上面也加上了 rule: vtext
。
//JS var verify_list = "123,456,789,147,258,369,159,357" var result = verify_list.split(",") .map((vtext)=>{ var add = this.blocks .filter((d, i) => vtext.indexOf(i + 1) != -1) .map((d) => d.type) .reduce((a, b) => (a + b), 0); return { rule: vtext, value: add } }) result = result.filter((obj) => Math.abs(obj.value) == 3) return result
![](https://creativecoding.in/wp-content/uploads/2021/08/井字圈叉遊戲-10-7.png)
11. 在畫面上顯示贏家
有了贏家之後,需要顯示在畫面中,我們在 computed:{}
新增另一個 win_text()
的函式。在預設上 winner = -1,
代表沒有任何贏家產生,而當 this.pattern_data.length > 0
,則表示有贏家產生數值時,將 winner 的值替換,再依據是正 3 還是負 3 顯示贏家。
//HTML #app h1 {{ win_text }} // win text .block_area .block(v-for="(block,bid) in blocks", v-bind:class="{circle: block.type == 1, cross:block.type == -1}" v-on:click="player_go(block)") .small_number {{ bid+1 }} .block.small(v-bind:class="{circle: turn == 1, cross: turn == -1}")
//JS win_text() { var winner = -1 if (this.pattern_data.length > 0) { winner = this.pattern_data[0].value } if (winner == 3) { return 'O wins' } else if (winner == -3) { return 'X wins' } return (this.turn == 1 ? 'X' : 'O') + "' turn" }
12. Vue.js中加上「防止每格內的重複點擊」的機制
在贏家產生後,照理來說遊戲就該停止了,但是現在遊戲還是可以不斷進行,原因在於還沒有防止重複點選機制。解決方式很簡單,只需要在點選前加上判斷格子是否為空的 block.type == 0
就可以了。
//JS player_go(block) { if (block.type == 0) { block.type = this.turn; this.turn = -this.turn; } else { alert("Not allow") } }
13. 增加按鈕重新開始遊戲
在遊戲結束後,需要清空畫面才能將再次進行遊戲,所以在最下方加上重新開始遊戲的按鈕。前面有提到 Click 動作點擊要搭配的前綴字為 v-on:click
,這可以縮寫成 @click
,而清空的功能在步驟七的地方已經寫好了,所以這裡只需要呼叫就可以囉。
//HTML #app h1 {{ win_text }} .block_area .block(v-for="(block,bid) in blocks", v-bind:class="{circle: block.type == 1, cross:block.type == -1}" v-on:click="player_go(block)") .small_number {{ bid+1 }} .block.small(v-bind:class="{circle: turn == 1, cross: turn == -1}") h2(@click="restart") Restart // Restart 重新遊戲
14. 最後來CSS裡調整畫面
目前元素都靠向左側,我們希望調整到整個畫面的中心位置對齊,會比較好看。除了 html
與 body
要將子元素#app
排列置中, #app
裡的所有元素也必須排列整齊垂直置中,所以在元素設定上也一同加上了 #app
。
在排列上使用 flex,前面有提到,flex 預設上是橫列的由左向右排列,但是我們要的是由上而下的垂直排列,所以方向設定上改成 flex-direction: column
,在主軸 justify-content
以及 交叉軸 align-items
都設定為置中 center。
//CSS html, body, #app background-color: $color_bg margin: 0 color: white +size(100%) display: flex justify-content: center align-items: center flex-direction: column
//HTML h2 Player // 在顯示輪到誰的圖示前面加上文字 Player .block.small(v-bind:class="{circle: turn == 1, cross: turn == -1}")
![](https://creativecoding.in/wp-content/uploads/2021/08/井字圈叉遊戲-14-1024x1006.png)
結語
我們總結一下這次的圈圈叉叉遊戲的範例,製作過程可以分為五個部分:
- 以CSS擬元素(:before, :after)的方式繪製圈圈叉叉。
- 透過 Vue 的 Array 產生九個框框,並且透過綁定資料,讓畫面可以根據資料顯示對應的樣式。
- Restart – 重新遊戲,可在遊戲一開始或是遊戲中點擊 Restart 後清空畫面。
- 利用
v-on:click
選寫下棋功能。 - 以
computed:{}
計算出贏家成立的條件以及在畫面上顯示贏家。
這就是我們用 CSS及Vue.js 寫出來的圈圈叉叉遊戲啦!老闆的成品這邊去,也非常歡迎大家到社團裡跟我們分享你們完成的作品。
動畫互動網頁程式入門(HTML/CSS/JS)以簡單例子帶你入門網站的基礎架構及開發,用素材刻出簡單有趣又美觀的網頁和動畫,享受做出獨一無二的網頁所帶來的成就感,在職場上與設計師和工程師合作無間。
打好基本的互動網頁基礎之後,可以進階動畫互動網頁特效入門(JS/CANVAS),紮實掌握JavaScript 程式與動畫基礎以及進階互動,整合應用掌控資料與顯示的Vue.js前端框架,完成具有設計感的互動網站。長達3085分鐘,超過60個精緻範例與400張的投影片以上,以及四個加碼單元vue-cli、GSAP、D3、Three.js的投影片,成為hahow上最長的課程。
此篇直播筆記由幫手 阮柏燁 協助整理
![墨雨設計banner](https://creativecoding.in/wp-content/uploads/2021/05/墨雨設計網站導流banner.png)