首先附上我的github地址,https://github.com/jiangzhenfei/five,线上实例:http://47.93.103.19:5900/client/
线上实例,你可以随意起用户名,房间号,然后让你同事或者自己再打开一个网页,输入任意用户名,但是房间号一样才可以进入同一个房间对战
本地运行,拷贝代码,npm install依赖,进入server文件夹,执行 node index.js,然后直接在页面打开client里面的index.html文件夹即可
详细的源码和解释都是在那里,本次实现的是五子棋线上对战,
技术点:
1.client/chess.js 该文件是五子棋算法,算法也很简单,棋盘的每一行个数一样,那么当你落子那一刻(左边为 x ),该左边边上的坐标都是知道的,比如我一行11个子,那么该落子右边为x+1,左边x-1,正头顶x-11,正下方x+11,左上x-10 ...,于是我们只要计算包括该落子在内的米子线上是否满足5个,下面我举一条线上算法,一条线上只要满足图中5个情况的一个即为该棋子赢了
2.后端在server文件夹,使用socket.io长连接持续推送给前端,要点是使用发布订阅模式,订阅一个房间的用户,给该房间的用户信息同步。
3.client/checkerboard.js 该文件是使用canvas绘制棋盘
4.client/resolve.js 该文件是页面操作处理,包括进入房间,棋盘点击,棋子渲染
5.server/index.js 该文件是后端处理,包括房间的订阅,房间信息的同步
6.server/subscrible.js 该文件是发布订阅模式代码