HTML5/javascript五子棋的核心關鍵點是：

• 1、弄清楚有多少種贏法；

• 2、怎麼判斷是否已經贏了；

• 3、計算機下棋演算法。

這裡巧妙地運用javascript陣列儲存贏法，判斷是否贏了，

通過權重比較，計算出計算機該下棋的位置。

這個五子棋不僅僅是javascript，也體現了html5的一些新特性，比如canvas繪圖，嚴格的來講是比較難的，但是對於學習javascript的夥伴來說，這又是一個非常好的鍛鍊專案，javascript重在思維與邏輯，而對於邏輯的鍛鍊，個人認為沒有比遊戲更為合適的了，所以對於javascript學習沒有自信，不知道怎麼學的，不妨用這個專案來練練手！

對於web前端的學習有不懂的，或者不知道學習路線，不知道學習方法，不知道該如何紮實學習能找到工作的朋友，可以來我們頭條前端群733581373，全套系統學習資料已上傳群檔案！

javascript程式碼詳解

從效果圖可以看到，棋盤的橫豎可以放的位置為15*15，通過canvas畫棋盤：

知道格子數後，我們先看五子棋有多少種贏法：

根據贏法總數定義分別儲存計算機和人贏法的陣列：

然後就是人開始下棋：

oneStep() 方法為落子，要在棋盤上畫一個棋子：

接著看計算機怎麼下棋，具體看computerAI()方法：

根據相應的權重，計算出計算機應該落子的位置。

悔棋以及撤銷悔棋用javascript怎麼實現？

要提的是，這裡暫時只能悔一步棋。悔棋功能主要關鍵點是：1、銷燬剛剛下的棋子；2、將之前不可能贏的狀態還原；看下具體的程式碼：

minusStep()為銷燬棋子的方法，我們看下是怎麼銷燬的。

首先通過clearRect()擦掉該圓，然後再重新畫該圓周圍的格子，注意相應的位置，這裡花了些時間折騰。

悔棋過後，再撤銷，相當於還原悔棋之前的狀態。程式碼比較簡單：

至此html5/javascript五子棋基本實現，剩下的佈局一些補充在此不一一寫出

最後，如果有想一起學習JavaScript的可以來一下我的前端群733581373，基本上頭條裡的好友都會在裡面交流，分享一些學習的方法和需要注意的小細節，每天也會準時的講一些JavaScript的炫酷特效，遊戲，外掛封裝，設計模式等等！

如果想看到更加系統的文章和學習方法經驗可以關注的微訊號：‘web前端技術圈’或者‘webxh6’關注後回覆‘2018’可以領取一套完整的學習視訊