标签：web 落子 前端 五子棋 JS 学习 赢法 源码 数组

棋盘的画法：canvas绘制直线、设置画笔颜色

棋子的画法：canvas画圆、填充渐变色  

判断计算机落子，可先遍历棋盘上哪些交叉点可以落子，基于某种规则给交叉点计算得分，则得分最高的交叉点即为计算机要落子的地方。

赢法数组：记录五子棋所有的赢法，用三维数组表示，前面两维表示棋盘。每一种赢法的统计数组，用一维数组表示。如何判断胜负，根据赢法的统计数组，如果说某一种赢法已经达到了五颗棋子，则这种赢法相当于被实现了，即某一方已经胜利了。

计算机的落子规则，根据赢法的统计数组进行加分，若棋盘上一条线上已有同种颜色的棋子越多，则再落子的价值越大，则对其加一个更高的分数。根据分数最高的位置进行落子。

效果图：

实现代码如下：

HTML代码 

五子棋游戏的核心关键点是：

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

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

3、计算机下棋算法。这里巧妙地运用数组存储赢法，判断是否赢了，通过权重比较，计算出计算机该下棋的位置。

如果有想学习web前端的同学，可来我们的web前端技术学习QQ群：608334068，免费送整套系统的web前端视频教程！我每晚上8点还会在群内直播讲解前端知识，这是一个仅供粉丝朋友们学习交流的群，欢迎大家前来学习哦~不是学习web前端的小伙伴非诚勿扰哦下面是部分资料截图：

欢迎关注，可视化学习web前端，每天更新文章，让web前端学习更加简单。

声明：本文内容来源于网络，如有侵权请联系删除

标签：web,落子,前端,五子棋,JS,学习,赢法,源码,数组
来源： https://blog.csdn.net/weixin_45028143/article/details/90704775

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。