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’可以领取一套完整的学习视频