前几天投了 Tencent XXX ，让做个五子棋，然后就做出来了。

项目代码在此

• 体验 Canvas 版本
• 体验 DOM 版本

😺...

游戏很简单：

1. 棋盘
2. 棋子（落棋）
3. 输赢
4. 悔棋

#棋盘

网格，用数组实现矩阵

#棋子

根据点击坐标和网格数量计算落子点

#输赢

其实挺多方法可以判断输赢，我选了一个最简单的方法：得到对应的四条轴的棋子数组，判断四条轴中是否有连续且同样的五位数字。

#悔棋

需要维护一个列表，存放记录，包括：棋子位置、角色 ID

还需要维护一个当前进度，用于撤销悔棋

Canvas 和 DOM 版本除了渲染方式不同，其他基本一致，Canvas 使用 getImageData 和 putImageData 保存棋盘快照用于悔棋，DOM 版本直接将历史记录操作至元素。

完