系列文章
Day01 - Tic Tac Toe篇：前言及功能構想
30天目標 今年受網友及朋友之邀，第一次參加iT邦幫忙鐵人賽，原本也是內心各種掙扎，但是想到電影”練習曲-單車環島日誌”說過的一句經典台詞「有些事，現在不做，就...
Day02 - Tic Tac Toe篇：開發環境準備
開發環境及樣板介紹 我常用的開發環境是create-react-app和react-boilerplate。這邊簡單引用官方文件介紹一下，會分享一下我選用的理由...
Day03 - Tic Tac Toe篇：檔案結構與資料結構規劃
檔案結構規劃 開始一個專案之前，還有一個重要的議題要面對，就是檔案結構(File Structure)的規劃，當專案的檔案及頁面越來越多，功能越來越複雜，好的檔...
Day04 - Tic Tac Toe篇：頁面佈局規劃及棋盤實現
工具介紹：styled-components 我在React裡面撰寫CSS常用的工具是styled-components，一般來說，CSS的限制是他沒有變量、循...
Day05 - Tic Tac Toe篇：事件處理
點擊方格 下棋事件 經過了 Day04，我們已經把棋盤畫出來了，接下來我們迫不及待地很想要來下棋。所以我們所要做的事情，就是我們要告訴我們的程式我們到底點了哪個...
Day06 - Tic Tac Toe篇：自己刻圈圈元件及叉叉元件
在 Day05 我們已經把該有的事件都做得差不多了，接下來我們希望把圈圈元件和叉叉元件加上去，讓我們點擊下去的時候，1會顯示圈圈，-1會顯示叉叉。 這邊先講一下...
Day07 - Tic Tac Toe篇：勝負判斷事前準備
到目前為止，我們伸縮自如的圈圈叉叉遊戲已經很像樣了，但是目前判斷勝負的工作還是需要玩家自己來判斷。我們希望電腦可以幫助我們判斷勝負，這樣就不用自己在那邊算自己是...
Day08 - Tic Tac Toe篇：勝負判斷方法(1/2)
勝負判斷分析 窮舉法 在 3x3 的圈圈叉叉遊戲中，獲勝的組合只有 8 種，以上圖為例，每個格子裡面的數字代表 block id，我們窮舉出所有獲勝連線： /...
Day09 - Tic Tac Toe篇：勝負判斷方法(2/2)
勝負判斷分析 昨天完成了 row 方向和 column 方向的勝負判斷，今天我們要來完成右斜和左斜方向的勝負判斷，我這邊先把這兩個方向命名為 forwardSl...
Day10 - Tic Tac Toe篇：Single Play機制
Single Play機制 昨天完成判斷勝負功能之後，我們剩下最後一個功能，就是讓玩家可以跟電腦對弈，回憶一下 Day03 的時候，我們有設計一個 isSing...