30天目標

今年受網友及朋友之邀，第一次參加iT邦幫忙鐵人賽，原本也是內心各種掙扎，但是想到電影”練習曲-單車環島日誌”說過的一句經典台詞「有些事，現在不做，就一輩子也不會做了。」所以決定來挑戰自己！
因為網路上真的很多厲害的網友及前輩大大們寫過ReactJS入門教學，透過這些文章真的讓我受益良多。但是在我入門ReactJS之後就一直很手癢，很想要多做一些應用練習，所以這次鐵人挑戰決定把題目訂在應用實作面，然後實作的主題是以經典小遊戲為主，主要目的是希望對於ReactJS入門之後，像我這樣的人，可以多練習多熟悉，分享的內容會以流程思考為主，然後也會分享我都用哪些工具或是Package，技術細節因為不是我這次想要分享的主軸，所以不會做很詳細的說明，但是我會盡量附上參考連結。

Tic Tac Toe篇 前言

對一個剛接觸ReactJS一年不到的我來說，很想要找一些有趣的題目來磨刀。想到小時候常玩的圈圈叉叉遊戲，回憶起童年種種的同時，忍不住手癢，很想要自己刻一個。但是圈圈叉叉遊戲在網路上隨便找都有，連在Google打圈圈叉叉後搜尋，都可以直接跳出遊戲，讓我還蠻驚訝的！所以為了做出一些小改變來增加趣味性，順便過年過節拿來騙騙小孩，決定來做一個伸縮自如的橡膠圈圈叉叉遊戲！

遊戲簡介

圈圈叉叉遊戲，又稱為井字棋。遊戲規則：
兩個玩家，一個打圈(◯)，一個打叉(✗)，輪流在3乘3的格上打自己的符號，最先以橫、直、斜連成一線則為勝。如果雙方都下得正確無誤，將得和局。
https://zh.wikipedia.org/wiki/井字棋

伸縮自如的圈圈叉叉遊戲 功能構想

我們這次要做的是伸縮自如的圈圈叉叉遊戲，所以我希望有下列功能：

1. 棋盤大小可以按照玩家自己設定，例如3x3, 4x4, 5x5….，愛有多大，就有多大。
2. 連成一直線的勝利條件可以自己設定，意思就是說，可以按自己心意設定連續3子獲勝，或是連續5子獲勝，直接變成五子棋！(雖然說五子棋好像都是下在棋盤的十字上，我們是下在空格裡，但是好像不會影響遊戲進行，所以這邊先忽略這些細節)。
3. 我們需要一個判斷勝負的演算法，告訴我們是誰獲勝了，並且標示他獲勝棋子的連線。這邊的勝負演算法需要適應不同棋盤大小，以及不同勝利條件。
4. 要有一個資訊顯示版，顯示目前輪到誰，以及顯示誰獲勝，或和局。
5. 要有一個重新開始的按鈕。
6. 可以切換成Single Play模式，也就是說身邊沒有朋友(哭...)的時候，可以自己跟電腦玩。不過因為我們這次不是以下棋演算法為主題，所以暫時用random演算法來讓電腦下棋。但是這邊會設計成演算法可以方便抽換，之後若有心要讓電腦變聰明，直接改演算法就可以了，不需要動到整個程式的架構。

預覽成果

講完構想之後，為了讓大家有實體感，並且相信上面的構想是真的做得到的，所以先來展示一下我們的成果，之後會朝向這個目標，逐步跟大家分享我的做法。