BING
Surmon's digital vihara
OG

五子棋

646 characters, 2 min read2017/05/08 PM6,976 views

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

项目代码在此

😺...

游戏很简单:

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

#棋盘

网格,用数组实现矩阵

#棋子

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

#输赢

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

#悔棋

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

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

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

Creative Commons BY-NC 4.0 https://surmon.me/article/53
12 / 12 comments
Guest
Join the discussion...
  • 遨游星海
    遨游星海🇨🇳CNHangzhouMac OSEdge

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

  • leesny
    Leesny🇨🇳CNChongqingWindowsChrome

    这个博客是开源的?

    • Surmon
      Surmon🇨🇳CNShanghaiMac OSChrome

      reply:

      是,常识

  • ewind
    Ewind🇨🇳CNXiamenMac OSChrome

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

    • Surmon
      Surmon🇨🇳CNXiamenMac OSChrome

      reply:

      666 图截的哪的

    • ewind
      Ewind🇨🇳CNXiamenMac OSChrome

      reply:

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

    • Surmon
      Surmon🇨🇳CNXiamenMac OSChrome

      reply:

      可以可以

  • island
    Island🇨🇳CNShenzhenWindowsChrome

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

    • Surmon
      Surmon🇨🇳CNXiamenMac OSChrome

      reply:

      Yes!

  • lokiho
    Lokiho🇨🇳CNGuangzhouWindowsQQBrowser

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

    • Surmon
      Surmon🇨🇳CNXiamenMac OSChrome

      reply:

      不客气💪

  • 444
    444🇨🇳CNChangshaWindowsChrome

    132 2