iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
Modern Web

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

鐵人鍊成 共 30 篇文章 | 35 人訂閱 訂閱系列文 團隊開橋找井
DAY 1

Day01 - Tic Tac Toe篇:前言及功能構想

30天目標 今年受網友及朋友之邀,第一次參加iT邦幫忙鐵人賽,原本也是內心各種掙扎,但是想到電影”練習曲-單車環島日誌”說過的一句經典台詞「有些事,現在不做,就...

2018-10-16 ‧ 由 Taiming 分享
DAY 2

Day02 - Tic Tac Toe篇:開發環境準備

開發環境及樣板介紹 我常用的開發環境是create-react-app和react-boilerplate。這邊簡單引用官方文件介紹一下,會分享一下我選用的理由...

2018-10-17 ‧ 由 Taiming 分享
DAY 3

Day03 - Tic Tac Toe篇:檔案結構與資料結構規劃

檔案結構規劃 開始一個專案之前,還有一個重要的議題要面對,就是檔案結構(File Structure)的規劃,當專案的檔案及頁面越來越多,功能越來越複雜,好的檔...

2018-10-18 ‧ 由 Taiming 分享
DAY 4

Day04 - Tic Tac Toe篇:頁面佈局規劃及棋盤實現

工具介紹:styled-components 我在React裡面撰寫CSS常用的工具是styled-components,一般來說,CSS的限制是他沒有變量、循...

2018-10-19 ‧ 由 Taiming 分享
DAY 5

Day05 - Tic Tac Toe篇:事件處理

點擊方格 下棋事件 經過了 Day04,我們已經把棋盤畫出來了,接下來我們迫不及待地很想要來下棋。所以我們所要做的事情,就是我們要告訴我們的程式我們到底點了哪個...

2018-10-20 ‧ 由 Taiming 分享
DAY 6

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

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

2018-10-21 ‧ 由 Taiming 分享
DAY 7

Day07 - Tic Tac Toe篇:勝負判斷事前準備

到目前為止,我們伸縮自如的圈圈叉叉遊戲已經很像樣了,但是目前判斷勝負的工作還是需要玩家自己來判斷。我們希望電腦可以幫助我們判斷勝負,這樣就不用自己在那邊算自己是...

2018-10-22 ‧ 由 Taiming 分享
DAY 8

Day08 - Tic Tac Toe篇:勝負判斷方法(1/2)

勝負判斷分析 窮舉法 在 3x3 的圈圈叉叉遊戲中,獲勝的組合只有 8 種,以上圖為例,每個格子裡面的數字代表 block id,我們窮舉出所有獲勝連線: /...

2018-10-23 ‧ 由 Taiming 分享
DAY 9

Day09 - Tic Tac Toe篇:勝負判斷方法(2/2)

勝負判斷分析 昨天完成了 row 方向和 column 方向的勝負判斷,今天我們要來完成右斜和左斜方向的勝負判斷,我這邊先把這兩個方向命名為 forwardSl...

2018-10-24 ‧ 由 Taiming 分享
DAY 10

Day10 - Tic Tac Toe篇:Single Play機制

Single Play機制 昨天完成判斷勝負功能之後,我們剩下最後一個功能,就是讓玩家可以跟電腦對弈,回憶一下 Day03 的時候,我們有設計一個 isSing...

2018-10-25 ‧ 由 Taiming 分享