使用原生JS寫五子棋

通過製作五子棋實例

掌握作用域、原型、閉包、多態等

前端基礎知識點的應用

前端開發者們

一起來看看吧

前言

聽說這是一道騰訊的面試題，可能網上已經有不少答案了，晚上沒事看到這道題就自己做了下。邏輯很簡單，考慮到是面試題，使用了 ES6 的語法。本文介紹下核心邏輯跟部分代碼。

代碼請至這裡下載

domo 請點擊這裡查看

目錄

前言

目錄

思路

保存已下的棋

判斷落子後是否勝利

對外 API 與 UI 綁定

結語

思路

核心邏輯大致如下：

棋盤上的點就是的坐標值；

每次落子就給該點賦顏色值；

落子後判斷該點為中心的 4 條軸，每條軸上的 9 個點，含中心點是否能連續 5 個點顏色相同；

是的話就結束遊戲並判斷為該顏色值的持方勝利，否的話就改變顏色值繼續遊戲。

保存已下的棋

我們建立個對象保存已下的棋，該對象的結構形為，初始為空，每次落子都給它添加屬性，屬性名表示坐標，屬性值表示棋子顏色，為白色，為黑色，未配置的屬性查詢返回。同時設兩個方法用來操作該對象。

判斷落子後是否勝利

首先獲取 4 條軸上的坐標，我們設落子點的坐標為[x, y]，那該點左上角的左邊為 [x – 1, y – 1]，右下角為 [x +1, y +1]，所以每個方向都是 x,y 與 1, -1, 0 三個數兩兩形成的數組加 4 次。如我們設落點坐標為[0,0]，則左上角的4個位置就是：

可以看出8個方向的相加值分別為[-1,-1], [-1,0], [1, -1], [-1, 0]，以及它們的相反值。

var roundDirect = [[-1,-1], [-1,0], [1, -1], [-1, 0]]

接下來寫個函數用來判斷是否勝利，接收數組作為參數：

這裡把每條軸的判斷交給函數判斷：

判斷單軸是否成立的邏輯是以落子為起點，它左側與右側的連續相同顏色的點棋子數目相加大於 4，再加上落子本身，就是形成了 5 子。

中心點與一側的連續相同顏色棋子的數量通過函數獲取：

這樣通過調用函數並傳入當前點的參數以及已知的參數，就可以得到落子後是否勝利連成 5 子。

對外 API 與 UI 綁定

每個棋盤實例對外輸出以下屬性與介面。

屬性：

對象，每個屬性為已下棋子的坐標，屬性值為該坐標的顏色值；

方法，是執行下棋的調用方法，參數分別為坐標值與要下棋子的顏色值；

介面：

與，兩個回調函數，每次落子後遊戲勝利結束及遊戲繼續的回調事件，color是下次落子的顏色值。

同時構建一個棋盤的 UI 對象並返回一個配置函數用來初始化棋盤實例，這裡我就不寫 UI 對象的具體實現了，各位有興趣的可以查看源碼，UI 對象的主要目的是綁定棋盤實例、渲染頁面、綁定事件。

棋盤 UI 對象主要接收以下參數：

，棋盤大小，會輸出大小的棋盤

棋盤實例與 UI 綁定後共同輸出一個函數用來初始化棋盤，按如下方式調用：

結語

這個五子棋很簡單，只要有基本的 js 基礎跟清晰的思路就能很快做出來。源碼中涉及到了作用域、原型、閉包、多態、柯里化等基礎知識，以及對對象、函數、數組等方法的運用，同時使用了 ES6 的語法。

感謝大家的閱讀。覺得不錯的小夥伴，不要忘記點贊、分享哦。

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！