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

项目代码在此

• 体验 Canvas 版本
• 体验 Dom 版本

😺...

游戏很简单：

• 棋盘
• 棋子（落棋）
• 输赢
• 悔棋

棋盘

网格，用数组实现矩阵

棋子

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

输赢

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

悔棋

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

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

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

完