iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 6
0
Modern Web

以經典小遊戲為主題之ReactJS應用練習系列 第 6

Day06 - Tic Tac Toe篇:自己刻圈圈元件及叉叉元件

Day05 我們已經把該有的事件都做得差不多了,接下來我們希望把圈圈元件叉叉元件加上去,讓我們點擊下去的時候,1會顯示圈圈,-1會顯示叉叉。

這邊先講一下我的想法再開始實作。要顯示出圖案,最簡單的做法就是把英文字母O和X當作圈圈叉叉,但是這樣字體改變的時候,顯示出來的樣式就會改變。

第二個我想分享的方法,是使用 Font Awesome。對工程師來說,在網頁加入一些小 icon 會造成一些額外的困擾,例如我們找到的圈圈和叉叉圖片風格會不一樣,造成美觀上的落差。此外,因為所有的icon是使用圖示顯示,所以可能會增加網站流量,嚴重可能會造成網站變慢,而且因為是圖片的關係,放大縮小的時候容易失真。

Font Awesome 提供的服務,幫我們把圖示 icon 都製作成文字的字型,然後再透過 CSS 去呼叫圖示 icon 出來,裡面的 icon 相當豐富,使用上很簡單方便。所以我們要使用圈圈叉叉的圖示,裡面也有提供。

Font Awesome
react-fontawesome

雖然 Font Awesome 很方便,我也很常用,但是其實我還是不滿足,因為我希望我們伸縮自如的圈圈叉叉遊戲是個很吸睛,很潮,很炫炮的遊戲,所以我私心希望我的圈圈和叉叉符號可以做更多的變化。未來,我希望我的圈圈和叉叉看起來有活著的感覺,不是死板板的躺在那裡,就像 RPG遊戲裡面的 NPC,他不會死板板的站在那裡等你來跟他說話,你不跟他互動的時候,NPC也會在那邊左搖右晃,做自己想做的事。

我希望我的圈圈和叉叉,很像動物園裡的動物,或是家裡的貓咪狗狗,平常沒事的時候,他可以自己在那邊晃來晃去,旋轉啊,變形啊,抖一抖,跳一跳啊,獲勝的時候還會很興奮地跳起來歡呼,好像是個活生生的可愛小動物,這樣我們的圈圈叉叉就會很有生命力,過年回家拿給小朋友玩的時候,他們會覺得很驚艷,用很崇拜的眼光看你,玩你做的遊戲玩得津津有味,就算你不包紅包給他,他也可以開心的過一個好年,這就是我們的目標。

為了讓這個目標得以實現,我想要自己用 html 和 css 客製出圈圈和叉叉,這樣我們可以控制圈圈叉叉的粗細,形狀,行為,甚至叉叉的兩條直線我們也可以分別控制,今天我們會製作完圈圈叉叉的棋子,之後讓他動來動去的動畫,大家可以按照自己的心意添加。

製作圈圈元件

因為他們是獨立的元件,所以我把它們放在components資料夾內,分別新增Circle和Cross,首先我們來製作Circle。
Circle

這邊我分享我的方法,核心的概念就是我需要一個長寬一樣的 div,然後讓 border-radius 屬性是100%,這樣就可以變成一個圓形的圈圈。

然後有一個要注意的地方是 border 的寬度,如果 border 的寬度是一個定值的話,當圈圈大小隨著棋盤的 gameScale 改變的時候,border 看起來就會很不成比例,例如小的圈圈 border 看起來很粗,或是大的圈圈 border 看起來很細。

所以這邊我的做法會跟 Day04 我們在調整棋盤方格的間距的時候一樣,我希望 border 的寬度可以隨著 gameScale 的調整而變粗或變細。

styled-components - Theming

然後這邊我想要補充一下 styled-components 的進階用法,styled-components 除了允許我們可以把變數透過props 的方式傳進去,根據 props 來做相對應的樣式改變之外,我們還能為 styled-components 訂製主題,所以元件就能根據我們定義的主題樣式做改變,而不用為了改變不同的樣式,傳了很多不同的 props 進來,然後在裡面寫了很多條件判斷式,導致狀況越多,裡面條件判斷式就越複雜。
Advanced Usage - Theming

製作叉叉元件

接下來我要分享叉叉的做法,叉叉可以分解成兩個元素構成的,兩條線交叉,所以一條線可以是一個 div tag,但是這邊我不想要寫兩個 div tag,我只想要用一個 div tag,然後搭配 CSS 偽元素 ( beforeafter )來達到這件事。
CSS 偽元素 ( before 與 after )

同樣的,叉叉的粗細跟 gameScale 有關,所以這邊 border 的做法跟圈圈是一樣的。另一方面,由於交叉的兩條線,基本上他的樣式是相同的,唯一的差別是他們旋轉角度不同,所以一條線是左上右下,另一條線是右上左下。但是這邊我不想要重複寫相同的 css 樣式,為了讓程式更好維護,同樣的東西只寫一次,styled-components 允許我們在裡面寫類似 SASS mixin 的語法,我的作法如下,提供給大家參考。
Cross

製作資訊看板 - InfoBoard

接下來我們要快速地用兩句話來實做我們的 InfoBoard,也就是目前輪到誰下棋,就顯示什麼符號。所以按照我們的定義,使用者 currentRole 是 1 的,我們就給他圈圈,currentRole 是 -1 的,我們就給他叉叉。大家按照自己的心意調整 style 就可以了,我的作法如下,提供給大家參考。
InfoBoard

今日成果

最後demo一下今天辛苦的成果
circle-cross-demo

Tic Tac Toe - Github


上一篇
Day05 - Tic Tac Toe篇:事件處理
下一篇
Day07 - Tic Tac Toe篇:勝負判斷事前準備
系列文
以經典小遊戲為主題之ReactJS應用練習30

尚未有邦友留言

立即登入留言