棋盘的画法：canvas绘制直线、设置画笔颜色
棋子的画法：canvas画圆、填充渐变色
判断计算机落子，可先遍历棋盘上哪些交叉点可以落子，基于某种规则给交叉点计算得分，则得分最高的交叉点即为计算机要落子的地方。
赢法数组：记录五子棋所有的赢法，用三维数组表示，前面两维表示棋盘。每一种赢法的统计数组，用一维数组表示。如何判断胜负，根据赢法的统计数组，如果说某一种赢法已经达到了五颗棋子，则这种赢法相当于被实现了，即某一方已经胜利了。
计算机的落子规则，根据赢法的统计数组进行加分，若棋盘上一条线上已有同种颜色的棋子越多，则再落子的价值越大，则对其加一个更高的分数。根据分数最高的位置进行落子。
效果图：
实现代码如下：
HTML代码
五子棋游戏的核心关键点是：
1、弄清楚有多少种赢法；
2、怎么判断是否已经赢了；
3、计算机下棋算法。这里巧妙地运用数组存储赢法，判断是否赢了，通过权重比较，计算出计算机该下棋的位置。
如果有想学习web前端的同学，可来我们的web前端技术学习QQ群：608334068，免费送整套系统的web前端视频教程！我每晚上8点还会在群内直播讲解前端知识，这是一个仅供粉丝朋友们学习交流的群，欢迎大家前来学习哦~不是学习web前端的小伙伴非诚勿扰哦下面是部分资料截图：
欢迎关注胖胖爱前端的简书号，可视化学习web前端，每天更新文章，让web前端学习更加简单。
声明：本文内容来源于网络，如有侵权请联系删除
网友评论