goBang

原生js实现的一个五子棋。演示地址

五子棋实现思路：

• 落子顺序：奇黑偶白，黑先手。
• 胜利判定：
  1. 如果这一步胜利，则上一步不可能胜利，否则游戏已结束。故只需根据当前落子位置判定。
  2. 当前子为中心的边长为9的米字形中是否存在任意相连的5个子。
• 存储数据方式选择：一个二维数组存储棋盘矩阵，值为1，-1,0时分别为黑，白，无子，简单粗暴。
• 落子逻辑：若游戏未结束且矩阵该处值为0，则可落子。
• 悔棋与撤销悔棋逻辑：
  1. 悔棋：将某处落子位置处矩阵值重置为0。
  2. 考虑连续悔棋，则用数组记录最近n次的落子位置。由是则每走一步，删去落子队列开头并添加新落子信息。
  3. 考虑撤销悔棋，与悔棋逻辑同理，不过不同的是每一次新的落子都应该清空撤销悔棋的队列，待到下次悔棋时再重新维护反悔棋队列。
• 游戏结束时则禁止继续落子，除非重玩。

UI实现及优化思路：

• 从组件化的角度及逻辑解耦的角度考虑，棋谱与棋子应该独立绘制，并且规则逻辑控制样式，样式无法影响逻辑。
• 考虑dom实现和Canvas实现的转化，依赖表格元素绘制棋谱不是好选择，直接定义一个棋盘div，用背景图，则后续可直接通过canvas绘制棋谱替换dom元素。
• 棋子是若干个等大小邻接密集排列的dom元素，使用border-radius与背景颜色绘制，后续也可直接用canvas绘制替换。
• 逻辑结合样式：落子直接在父元素进行事件委托，结合棋子的dom索引值构建逻辑。