如何使用原生 JS，快速寫出一個(gè)五子棋小游戲
1. 棋盤和棋子的繪制。
先創(chuàng)建一個(gè)15 * 15的二維數(shù)組，通過對(duì)數(shù)組的兩層遍歷，創(chuàng)建出一個(gè) 15 * 15 的表格，這樣棋盤就有了。用數(shù)組來繪制棋盤的好處是便于查找和篩選。每一個(gè)td都對(duì)應(yīng)著一個(gè)空對(duì)象，下棋的時(shí)候通過給這個(gè)對(duì)象添加一個(gè) num 的屬性，num 為 1 時(shí)，就渲染成黑色，2 就渲染成白色，再稍微調(diào)整一下 css 樣式，這樣棋盤和棋子就繪制好了。每一個(gè) td 都有自己的自定義屬性 x 和 y，類似于坐標(biāo)，這樣就可以很方便的把 td 標(biāo)簽和數(shù)組里對(duì)應(yīng)的值聯(lián)系起來。下面是 css 代碼
2. 輪流下棋的點(diǎn)擊事件
下棋的邏輯很簡(jiǎn)單，就是點(diǎn)擊棋盤的時(shí)候，給點(diǎn)擊的td對(duì)應(yīng)的那個(gè)對(duì)象添加一個(gè)num屬性，黑棋就是1，白棋就是2，然后渲染出來就可以了。下棋順序可以通過一個(gè)全局變量flag來控制，同時(shí)聲明兩個(gè)全局?jǐn)?shù)組，用來存放所有的黑棋和白棋。后面判斷勝負(fù)時(shí)，要對(duì)這兩個(gè)數(shù)組先進(jìn)行遍歷。
3.獲勝條件判斷
接下來就是寫獲勝條件了。我分成了 4 種情況，橫軸，數(shù)軸，正斜軸和反斜軸。這 4 種情況邏輯和方法大致都是相同的，就是里面的數(shù)據(jù)有些細(xì)微差別。
3.1 橫軸獲勝
以橫軸為例，如何判斷獲勝，先判斷是黑棋還是白棋，然后遍歷對(duì)應(yīng)的數(shù)組。已黑棋為例，遍歷之后把y值相同的黑棋篩選出來都放入一個(gè)數(shù)組中，也就是同一行的黑棋。接著比較這一行的這些黑棋的x值，如果有5個(gè)連續(xù)的x值，則說明橫軸上有5個(gè)連續(xù)的黑棋，就可以判斷獲勝了。怎么比較這些x值呢，我的做法是先將他們用sort()方法排序，接著從小到大依次比較。建一個(gè)新數(shù)組，第二個(gè)值等于第一個(gè)值加1，就把他們?nèi)拥竭@個(gè)新數(shù)組中，如果出現(xiàn)某個(gè)值不連續(xù)了，就將這個(gè)數(shù)組清空，這樣通過判斷這個(gè)數(shù)組的長度，就能判斷勝負(fù)了。
3.2 數(shù)軸獲勝
?豎軸和橫軸代碼基本上也相同
只是換了個(gè)條件，把 if (item[0] == td.dataset.y) ?換成了 if (item[1] == td.dataset.x)，意思就是選出這一列所有的棋子。后面的邏輯和代碼就和橫軸一樣了。?
3.3 正斜軸獲勝
斜軸困難一點(diǎn)的地方就是，怎么篩選出這一條斜線上的所有棋子。
只要能把這條斜線上的棋子給找出來，后面的邏輯判斷就都一樣了。所有的斜線都是 45 度角，也就是說斜線上的任意兩個(gè)棋子，他們的x值之差于y值之差是相等的。這樣的話，判斷起來就簡(jiǎn)單了。??if ((item[0] - td.dataset.y) == (item[1] - td.dataset.x))?? 這樣就可以了。斜線上的棋子找出來后，后面的步驟就都一樣了，復(fù)制粘貼即可。
3.4 反斜軸獲勝
反斜軸同理，條件改成 if (0 - (item[0] - td.dataset.y) == (item[1] - td.dataset.x))，其余的復(fù)制粘貼。
把這些函數(shù)放到下棋事件里面調(diào)用，整個(gè)功能就完成了。
4. 悔棋功能
最后寫一下悔棋功能，點(diǎn)擊悔棋，把對(duì)應(yīng)數(shù)組里面的數(shù)據(jù)刪除，然后重新渲染棋盤就完事了。
總結(jié)
整個(gè)代碼寫下來，都是些 js 的基本語法，幾個(gè)數(shù)組的方法來回用，希望能給 js 初學(xué)者一些幫助。
