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