og

五子棋

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

项目代码在此

😺...

游戏很简单:

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

棋盘

网格,用数组实现矩阵

棋子

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

输赢

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

悔棋

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

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

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

Article created at 2017/5/8 pmin category code|4591 views.

Related tags:web,javascript

Article address:https://surmon.me/article/53

11comments
  • 444
    444Windows10Chrome50CN-Loudi#269

    132 2

  • lokiho
    LokihoWindows7QQBrowser9CN-Guangzhou#275

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

  • Surmon
    SurmonMac OS10.12.5Chrome58CN-Fuzhou#276

    reply:

    不客气💪

  • island
    IslandWindows7Chrome55CN-Shenzhen#313

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

  • Surmon
    SurmonMac OS10.12.5Chrome59CN-Fuzhou#314

    reply:

    Yes!

  • ewind
    EwindMac OS10.12.6Chrome59CN-Fuzhou#360

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

  • Surmon
    SurmonMac OS10.12.6Chrome62CN-Fuzhou#361

    reply:

    666 图截的哪的

  • ewind
    EwindMac OS10.12.6Chrome59CN-Fuzhou#362

    reply:

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

  • Surmon
    SurmonMac OS10.12.6Chrome62CN-Fuzhou#363

    reply:

    可以可以

  • leesny
    LeesnyWindows10Chrome64CN-重庆市#648

    这个博客是开源的?

  • Surmon
    SurmonMac OS10.13.6Chrome68CN#842

    reply:

    是,常识

anonymous