HTML5/javascript五子棋的核心关键点是：

• 1、弄清楚有多少种赢法；

• 2、怎么判断是否已经赢了；

• 3、计算机下棋算法。

这里巧妙地运用javascript数组存储赢法，判断是否赢了，

通过权重比较，计算出计算机该下棋的位置。

这个五子棋不仅仅是javascript，也体现了html5的一些新特性，比如canvas绘图，严格的来讲是比较难的，但是对于学习javascript的伙伴来说，这又是一个非常好的锻炼项目，javascript重在思维与逻辑，而对于逻辑的锻炼，个人认为没有比游戏更为合适的了，所以对于javascript学习没有自信，不知道怎么学的，不妨用这个项目来练练手！

对于web前端的学习有不懂的，或者不知道学习路线，不知道学习方法，不知道该如何扎实学习能找到工作的朋友，可以来我们头条前端群570946165，全套系统学习资料已上传群文件！

javascript代码详解

从效果图可以看到，棋盘的横竖可以放的位置为15*15，通过canvas画棋盘：

知道格子数后，我们先看五子棋有多少种赢法：

根据赢法总数定义分别保存计算机和人赢法的数组：

然后就是人开始下棋：

oneStep() 方法为落子，要在棋盘上画一个棋子：

接着看计算机怎么下棋，具体看computerAI()方法：

根据相应的权重，计算出计算机应该落子的位置。

悔棋以及撤销悔棋用javascript怎么实现？

要提的是，这里暂时只能悔一步棋。悔棋功能主要关键点是：1、销毁刚刚下的棋子；2、将之前不可能赢的状态还原；看下具体的代码：

minusStep()为销毁棋子的方法，我们看下是怎么销毁的。

首先通过clearRect()擦掉该圆，然后再重新画该圆周围的格子，注意相应的位置，这里花了些时间折腾。

悔棋过后，再撤销，相当于还原悔棋之前的状态。代码比较简单：

至此html5/javascript五子棋基本实现，剩下的布局一些补充在此不一一写出

对于web前端的学习有不懂的，或者不知道学习路线，不知道学习方法，不知道该如何扎实能找到工作的朋友，可以来我们头条前端群570946165，全套系统学习资料已上传群文件！

需要更多前端学习资料/视频/学习方法，请关注后，私信“学习”