五子棋 | Surmon.me

BING

原创

五子棋

共 646 字，需阅读 2 分钟

2017/05/08 下午

6,271 次阅读

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

项目代码在此

😺...

游戏很简单：

棋盘
棋子（落棋）
输赢
悔棋

#棋盘

网格，用数组实现矩阵

#棋子

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

#输赢

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

#悔棋

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

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

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

完

本文于2017/05/08 下午发布在宁静寺

#Web 开发、#JavaScript

署名 - 非商业性使用 4.0 国际

https://surmon.me/article/53

常见的 Web 安全问题

几种常见的Web安全问题，及解决方法；目前只有XSS、CSRF、SQL注入。

在 JavaScript 中学习数据结构与算法

栈、队列、链表、集合、字典、散列表、树、图等数据结构，以及各种排序和搜索算法知识

遨游星海🇨🇳CN•HangzhouMac OSEdge
体验 DOM 版本，黑棋赢了✌️
2 年前
Leesny🇨🇳CN•ChongqingWindowsChrome
这个博客是开源的？
6 年前
- Surmon🇨🇳CN•ShanghaiMac OSChrome
  回复：
  是，常识
  5 年前
Ewind🇨🇳CN•XiamenMac OSChrome
这个很漂亮啊~说来挺巧，两年多前我准备面鹅厂的时候也写过一个类似的，带了简单的剪枝算法 js-gomoku-2
6 年前
- Surmon🇨🇳CN•XiamenMac OSChrome
  回复：
  666 图截的哪的
  6 年前
- Ewind🇨🇳CN•XiamenMac OSChrome
  回复：
  维基百科啊…算法很老了，维基上伪代码拿来改改就能用（
  6 年前
- Surmon🇨🇳CN•XiamenMac OSChrome
  回复：
  可以可以
  6 年前
Island🇨🇳CN•ShenzhenWindowsChrome
大哥,我们好像是朋友了😃
6 年前
- Surmon🇨🇳CN•XiamenMac OSChrome
  回复：
  Yes!
  6 年前
Lokiho🇨🇳CN•GuangzhouWindowsQQBrowser
学习canvas中，感谢分享！😃👍
7 年前
- Surmon🇨🇳CN•XiamenMac OSChrome
  回复：
  不客气💪
  6 年前
444🇨🇳CN•ChangshaWindowsChrome
132 2
7 年前

没有更多