原生JS+Canvas實現五子棋游戲

效果圖

主要功能模塊為： 1.人機對戰功能 2.悔棋功能 3.撤銷悔棋功能

二、代碼詳解

2.1 人機對戰功能實現

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

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

根據贏法總數定義分別保存計算機和人贏法的數組：

然后就是人開始下棋：

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

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

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

2.2 悔棋功能

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

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

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

2.3 撤銷悔棋功能

悔棋過后，再撤銷，相當于還原悔棋之前的狀態。代碼比較簡單：

至此，比較簡單的完成了這三個功能。

三、總結

五子棋游戲的核心關鍵點是：1、弄清楚有多少種贏法；2、怎么判斷是否已經贏了；3、計算機下棋算法。這里巧妙地運用數組存儲贏法，判斷是否贏了，通過權重比較，計算出計算機該下棋的位置。 過程中用到canvas，之前有學習過，雖然很久沒用，查了些資料，復習了怎么畫線，畫圓，學會了怎么如何清除一個圓等。 然后要注意的是，用原生Js怎么為元素添加、刪除class。

作者：頡旺飛
鏈接：https://juejin.cn/post/6901089743665102855
來源：掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

總結

以上是生活随笔為你收集整理的五子棋人机对战_原生JS+Canvas实现五子棋游戏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。