原生JS+Canvas實現(xiàn)五子棋游戲

效果圖

主要功能模塊為： 1.人機(jī)對戰(zhàn)功能 2.悔棋功能 3.撤銷悔棋功能

二、代碼詳解

2.1 人機(jī)對戰(zhàn)功能實現(xiàn)

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

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

根據(jù)贏法總數(shù)定義分別保存計算機(jī)和人贏法的數(shù)組：

然后就是人開始下棋：

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

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

根據(jù)相應(yīng)的權(quán)重，計算出計算機(jī)應(yīng)該落子的位置。

2.2 悔棋功能

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

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

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

2.3 撤銷悔棋功能

悔棋過后，再撤銷，相當(dāng)于還原悔棋之前的狀態(tài)。代碼比較簡單：

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

三、總結(jié)

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。