前端框架 React hw2：五子棋遊戲

請實作出一個簡單的五子棋遊戲，讓黑棋白棋可以輪流下，並且判定勝負。棋盤的話請用十九路棋盤（19*19），如果想挑戰更進階的，可以試著把棋譜也記錄起來，甚至是做一個輸入棋譜就可以重演整個盤面的小程式。

—

在這裡要參考的是 React 官方教學 ，不過有很多地方需要細細的思考。

按照流程先是切板，先使用 html 切出一個可行的版面，搭配 CSS，然後放到 React 的 render 內部。

不過在這邊可以先想一下圖層的概念，來切開一個一個的 component。

思考過後，在這邊考慮使用圖層的方式來寫。所以就是把我需要的部分分開另外開 component 寫上去：

class App extends React.Component {
  render() {
    return (
      <div className="game container">
        <Title />
        <Board />
        <State />
      </div>
    );
  }
}

title 就是簡單地寫個 title 的資訊即可，但是思考過後，不然乾脆連狀態一起寫，否則多寫一個 component 也是浪費。

所以這樣就變成只需要兩個 child component 就好。

<div className="game container">
  <Information />
  <Board />
</div>

所以針對這部分，就先把整個需要的盤面切版出來，所以就可以直接在 render 後面的 return 開始寫需要的 html 標籤，並且讓整個可以 render。

在這邊是使用盤面跟下棋的區域分開的方式，主要是因為希望可以把棋放在線上面。

整個盤面是操作這篇來實作的，這應該是二期的學長。

所以除了版面切版，因為需要 render 300多個元素，總不能我手動 keyin 吧？就直接把 state 設置好，使用 state 來控制到底要 render 幾個。

這就會讓我把一部分的傳值功能寫好，所以就順便把下棋的功能也實作上去，而這到目前為止都還指示有關於畫面的部分而已：

接下來才是判斷的部分，這部分就需要花時間去研究到底要如何判斷的，我之前的想法是用向量的方式來判斷，所以經過思考之後，我可能需要先抓到二維座標的值，但這部分也不困難，本來是一維的麻？拉成二維就是 x, y 的關係而已啊？

用座標來想，本來我們的座標是 x 值是往右，而 y 軸是往上，但因為這邊的render 是從右至左，然後上到下，所以 y 軸就要顛倒過來思考。

x 是 x 軸的值，而 y 是 y 軸的值，然後再搭配一個 n , n 就是棋盤一行的寬度，也是 x 軸的寬度。

當前因為一行是 19 格，所以 x 的值一定是不到 19，所以只要知道下的子的 array 的 index 值，就可以推算出當前的座標。

只要把一維陣列的 index 除以 19，就可以得知 y 的值。然後 y 的值去乘以 19，再用 index 減掉這個值，就可以得到 x 值。

得到當前下的座標之後，就可以放進去勝利方程式來判斷，用方向性來判斷。

判斷這邊，因為原始的寫法就是一維的，所以要判斷還要把整個棋盤轉換成二維。

不過目前的方式還有點太複雜，因為我好像還必須要把傳入的 array 轉成二維陣列，這部份就需要在研究了。轉成二維陣列之後才可以判斷，又或是把判斷二維的方法寫成一維的判斷呢？這好像也可以的。

假如今天是走 x, y 軸 +1，那就很簡單的檢查 index 前 20 位，然後在檢查這位的前 20 位就好，一路檢查到有五顆或是無即可判斷勝負。

但後來思考之後，這種寫法等於是寫死整個計算方式，不然就要寫一堆程式碼去計算到底要怎麼走，所以就決定要用二維的方式來寫。

判斷的部分其實滿複雜的，因為用方向來判斷，需要斷定有沒有超過幾個子這樣子。

所以要把傳入的盤面一維陣列改成二維的，然後二維陣列的座標就可以用來判斷成功與否。

在這邊就需要另外寫一個 function 來把當前的值，需要的方向給傳入，然後回傳長度。

最後把對應邊，像是左邊對應右邊，的總長度判斷有沒有沒超過四，因為自己的顏色不算，只要同一條線上有超過，就是勝利了。

通過這種寫法就不用那種太複雜的判斷。

最後完成如下：