示例源码见github:
https://github.com/qq20004604/Backgammon-websocket
详细交互逻辑请见下一篇博客：
[http://blog.csdn.net/qq20004604/article/details/73835546
五子棋网络对战版说明
1、安装与运行
请完整的down下除了node_modules文件夹以外的所有文件，然后在控制台运行 npm install来进行安装。
安装完毕后，通过 npm start 命令来运行服务器，然后通过 127.0.0.1 来访问页面。
如果浏览器不支持es6，那么需要通过babel转码Backgammon.js后运行。
2、简单介绍
通过websocket技术，建立长连接，实现五子棋网络对战功能。
具有以下功能：
- 分为大厅（默认位置）及独立房间（新建房间或者进入房间后的位置）；
- 不同的独立房间互不影响；
- 支持大厅聊天；
- 支持房间内部聊天；
- 实时更新当前全部在线人数、以及开启的房间数、服务器时间；
- 无人房间自动删除；
- 离开房间时对玩家、以及同房间内玩家自动提示；
- 支持三种角色：黑色下棋方、白色下棋方、观战者（不限人数）；
- 支持房间内角色自由切换；
- 黑方和白方同时存在时可以开始游戏；
- 记录游戏的上一局胜利者；
- 支持胜利条件判定，并提示胜利原因；
- 支持一局游戏结束后可以重新开始；
- 自动标注上一子下的地方；
- 可以从房间内返回大厅；
- 可以自动更换新名字（目前是随机生成，但修改为自定义只需要添加一个输入框即可，修改一下客户端逻辑即可）；
3、服务器端介绍
--------------------- 本文来自 qq20004604 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/qq20004604/article/details/73833179?utm_source=copy
3.1 socket.io
nodejs服务器端socket.io库，在socketIO文件夹里的socketIO.js文件中引入。
效果是实现服务器端的长连接功能。
3.2 /socketIO/socketIO.js
服务器端通信事件的处理逻辑所在。
本文件内引入了三个模块：
- models/fun：公有函数模块；
- models/roomList：五子棋功能核心模块，具体在下面细说；
- socket.io：socket.io库，长连接实现的模块；
本函数在引入socket.io库后，和http服务器绑定（因为使用的是express服务器），然后通过返回的io实例来监听用户连接和绑定事件。
另外，由于socket.io引入的实例，需要通过http服务器进行绑定后才有效，因此模块导出init函数，在bin文件夹中的www文件引入，并调用，实现事件绑定监听功能。
3.3 /models/roomList.js
实现五子棋功能的核心模块。
本页面里以RoomList为构造函数，然后相关功能作为RoolList的扩展函数来实现。
包括以下方法：
- 创建空房间；
- 加入房间；
- 退出房间；
- 清除空的游戏房间；
- 获取当前开启中的房间数；
- 通过用户，查找用户角色，用户所在的房间的信息，用户所在房间的ID；
- 房间内用户角色切换（黑、白、观战方切换）；
- 向本房间内所有人通报消息；
- 遍历房间内所有用户，并执行回调函数；
- 遍历每个不在游戏房间中的人（即在游戏大厅）；
- 遍历每个房间的每个人，向其更新其所在房间的信息；
- 对当前房间的所有人更新本房间的信息（11和2中会调用）；
- 传入用户当前下棋的这一步，返回是否可以下棋；
- 判定当前房间是否有胜利者（如果有，则会在13中检测谁是胜利者）；
私有函数三个：
- 判断当前下棋情况是否符合胜利条件；
- x,y坐标和索引坐标转换函数；
- 过滤越界情况的过滤器；
3.4 /models/fun.js
公有函数文件。
内含以下私有方法：
- 格式化时间（年-月-日 时:分:秒）
- 格式化时间（时:分:秒）
- 在字符串开始补足0（用于格式化时间使用）
暴露以下公有方法：
- 获取当前时间（年-月-日 时:分:秒）
- 获取当前时间（时:分:秒）
- 获取userAgent（通过改变key可以获取其他的）
- 获取ip
- 随机生成名字
注：公有方法的345并没有被使用。
3.5 /app.js
express的路由配置文件
3.6 /routerManager.js
路由管理文件。由于本DEMO只有五子棋，无需特别配置路由，因此内部没有写额外逻辑；
3.7 /views
模板文件，当访问错误等情况时，由express渲染后生效。
4、客户端介绍
4.1 socket.io.js
客户端的websocket实现库。
在这个里面，封装了websocket的实现功能。
别问我里面的原理是啥，我目前只会用┑(￣Д ￣)┍
4.2 index.html
五子棋的html文件。
通过本文件引入样式文件、socket.io.js文件、以及五子棋客户端逻辑。
DOM基本结构如下：
- 顶部：个人信息和房间管理；
- 中部：聊天室和游戏页面；
- 底部：服务器状态；
4.3 Backgammon.js
五子棋客户端逻辑实现文件。
内含以下内容：
- SETTING图片大小配置、ROOMINFO房间信息、USERINFO玩家信息
- init函数：初始化函数，调用本方法完成初始化；
- selector函数：仿jQuery选择器函数（简易版）；
- startEvent函数：连接建立后初始化名称（由于不明原因，在连接建立后直接发起websocket请求会导致连接断开，所以只能先这么处理）；
- listenSocketEvent函数：websocket的服务器监听和响应内容都写于这里；
- listenDomclickEvent函数：DOM事件都写于这里；
- getName函数：随机生成姓名；
- getNowDate函数：获取客户端当前时间（掉线时会调用这个显示掉线时间）；
- initBoard函数：棋盘初始化，会生成棋盘的DOM，以及假如本棋局已经开始，会继续生成棋盘内已下棋的棋子；
- createBox函数：创建一个div，默认带”box”类，参数一会额外添加其他类，参数二会添加索引；
- toMakePieceWhenHasStart函数：根据下棋记录，在棋盘上生成多个棋子（需要完整的从第一步开始的下棋记录）；
- createPiece函数：创建新的棋子，参数一是棋子位置的索引，参数二是棋子在下棋序列数组里的索引，数组里0黑1白；
- resetRoomInfo函数：重置房间信息（离开房间时调用）；
- checkerboardClick函数：监听当前棋子下在哪一个位置；
- checkCanPutPiece函数：判断能否下这一步棋（服务器端会二次校验）；
- GameOver函数：游戏结束时调用；
- changeColor函数：告知用户当前下棋人是谁；
4.4 Backgammon.css
样式文件啦，显然咯。
4.5 .png结尾的文件
图片资源，比如棋盘的图片（靠这些拼接起来的），棋子的图片（黑和白两种）等。
5、反作弊
本游戏提供反作弊功能。
反作弊功能的实现核心原理是：
- 将下棋步骤存放在服务器端，在下棋的时候双端验证（包括本地和服务器端），如果服务器端验证失败，是不允许下这一步棋的；
- 胜利条件判断的条件由服务器端在下完一步棋之后进行判定，只有判定通过后，才会由服务器端通报游戏结束，并播报胜利的原因；
6、待改进功能
- 自定义修改名字：其实服务器端是支持的，但是本地端我为了省事使用的是随机生成名字的方式；
- 账号注册、登录和战绩记录：无非是添加一个注册、登录、游戏结束后记录游戏结果的功能，不过这样的话，游戏过程中就不允许角色切换了，如果有人长时间退出游戏，那么需要直接判定胜负。功能不难，就是有点麻烦，还有刷成绩的潜在问题；
- 五毛钱特效：比如切换角色时，给一个提示；比如四子连珠时，给个提示；再比如，胜利的时候，给个提示；等等。
- 聊天和游戏窗口合并：比如左边聊天，右边游戏窗口，但是本宝宝缺乏设计天赋……
- 支持列出所有已开启房间列表，并且允许通过点击加入这些房间。
转自：https://blog.csdn.net/qq20004604/article/details/73833179?utm_source=copy
网友评论