五子棋

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

项目代码在此

😺...

游戏很简单:

  • 棋盘
  • 棋子(落棋)
  • 输赢
  • 悔棋

棋盘

网格,用数组实现矩阵

棋子

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

输赢

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

悔棋

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

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

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

本文于 2017/5/8 下午 发布在 Code 分类下,当前已被围观 792 次

相关标签:Web开发Javascript

永久地址:https://surmon.me/article/53

版权声明:自由转载-署名-非商业性使用  |  Creative Commons BY-NC 3.0 CN