BING
斯是陋室,唯吾芳馨
原创

五子棋

共 646 字,需阅读 2 分钟2017/05/08 下午7,145 次阅读

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

项目代码在此

😺...

游戏很简单:

  1. 棋盘
  2. 棋子(落棋)
  3. 输赢
  4. 悔棋

#棋盘

网格,用数组实现矩阵

#棋子

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

#输赢

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

#悔棋

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

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

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

署名 - 非商业性使用 4.0 国际 https://surmon.me/article/53
12 / 12 条看法
访客身份
在下有一拙见,不知...
  • 遨游星海
    遨游星海🇨🇳CNHangzhouMac OSEdge

    体验 DOM 版本 ,黑棋赢了✌️

  • leesny
    Leesny🇨🇳CNChongqingWindowsChrome

    这个博客是开源的?

    • Surmon
      Surmon🇨🇳CNShanghaiMac OSChrome

      回复

      是,常识

  • ewind
    Ewind🇨🇳CNXiamenMac OSChrome

    这个很漂亮啊~说来挺巧,两年多前我准备面鹅厂的时候也写过一个类似的,带了简单的剪枝算法 js-gomoku-2

    • Surmon
      Surmon🇨🇳CNXiamenMac OSChrome

      回复

      666 图截的哪的

    • ewind
      Ewind🇨🇳CNXiamenMac OSChrome

      回复

      维基百科啊…算法很老了,维基上伪代码拿来改改就能用(

    • Surmon
      Surmon🇨🇳CNXiamenMac OSChrome

      回复

      可以可以

  • island
    Island🇨🇳CNShenzhenWindowsChrome

    大哥,我们好像是朋友了😃

    • Surmon
      Surmon🇨🇳CNXiamenMac OSChrome

      回复

      Yes!

  • lokiho
    Lokiho🇨🇳CNGuangzhouWindowsQQBrowser

    学习canvas中,感谢分享!😃👍

    • Surmon
      Surmon🇨🇳CNXiamenMac OSChrome

      回复

      不客气💪

  • 444
    444🇨🇳CNChangshaWindowsChrome

    132 2