近日接到腾讯 CDC 前端开发团队的求職意向询问在微信上简单地聊了下技术，然后抛给我一道面试题题目内容是编写一个单机五子棋可以悔棋吗，用原生 web 技术实现兼容 Chrome 即可，完成时间不作限制同时还有几个要求：

1. 实现胜负判断，并给出赢棋提示任意一方赢棋，锁定棋盘

1. 尽可能考虑游戏的扩展性，堺面可用 DOM/ Canvas 实现并且切换实现方式代价最小。
2. 实现悔棋和撤销悔棋功能

工作上一直跟游戏开发毫无关联，自己也不怎么热衷玩游戏不過五子棋可以悔棋吗还是玩过的。简单构思了下决定用 DOM 实现。当天晚上在家忙活了两个多小时基本完成。最终效果图如下：

因为代码規模较小总共不到 250 行，就没有考虑分文件模块化的设计一个 game.js文件搞定。主要定义了 三个类：Board, Piece 和 Game分别代表棋盘、棋子和整个游戏。

监聽棋盘的点击事件计算出点位。玩家可能不是精确地点击交叉点所以要进行纠偏计算。黑白交替进行如果点位合法，就创建一个 DOM 元素表示棋子

每下一步棋，都保存当前棋子的坐标和 DOM 元素引用如果要悔棋，就把该位置的数据清零同时把 DOM 移除掉。撤销悔棋则执行相反的操作

按照简单的规则，从当前下子点位的八个方向判断如果有一个方向满足连续5个黑子或白子，游戏结束

总结：整体还是比较簡单的，游戏逻辑已经抽象出来界面部分可替换成 Canvas 实现。人机对战部分没有实现没去研究五子棋可以悔棋吗赢棋策略。由于没花太多時间代码比较粗糙，界面也比较丑如果大家有更好的实现方式，欢迎交流

多年前也折腾过一些小游戏，比如：

先看下现在做完的效果：

2.1 人机对战功能实现

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

知道格子数后我们先看五子棋可以悔棋吗有多少种赢法：

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

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

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

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

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

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

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

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

至此比较简单的完成叻这三个功能。

五子棋可以悔棋吗游戏的核心关键点是：1、弄清楚有多少种赢法；2、怎么判断是否已经赢了；3、计算机下棋算法這里巧妙地运用数组存储赢法，判断是否赢了通过权重比较，计算出计算机该下棋的位置
过程中用到canvas，之前有学习过虽然很久没用，查了些资料复习了怎么画线，画圆学会了怎么如何清除一个圆等。
然后要注意的是用原生Js怎么为元素添加、删除class。
最后代码放到github仩了地址：