如何实现一个Web版五子棋技巧游戏的界面

来源：蜘蛛抓取(WebSpider) 时间：2016-09-08 01:45 标签： 五子棋游戏 
1. 建立连接后就认为在游戏大厅中；
2. 断开连接（比如关闭浏览器或者其他）认为离开游戏大厅；
3. 即使在【游戏房间】中，也依然认定其在游戏大厅；
4. 通过服务器端onlineUsers（Map结构）来存储在线用户（作为key）；

1. 创建游戏后创建的内容就是游戏房间；
2. 游戏房间变量存储以下内容：

1. 以userSocket作为key，存储在线用户以及该用户當前的游戏信息（房间号 + 角色）；
2. 用户建立连接时，将其加入；
3. 用户退出房间时从中删除（并找到其对应的游戏房间，从房间删除）通报该房间所有人；
4. 退出游戏大厅时，读取到该用户所在游戏信息如果有则调用3

开启的房间roomlist（服务器端） 

1. Map结构，以roomID作为key存储该房间的信息；
2. 游戏房间的具体数据查看关键词【游戏房间】；
3. 可以通过.size获取到当前已开启的游戏房间的房间数
  1. 用户建立创长连接，回调函数出现socket變量；
  1. 用户退出长连接触发”disconnect”；
  2. 调用【退出游戏房间】相关逻辑；
  1. 检查该用户是否在房间中，如果在则禁止创建；
  2. 随机创建一个不重複的房间ID；
  3. 将该房间信息和房间ID以kv形式添加到roomlist中；
  4. 调用加入房间的API；（见下面）
  1. 需要参数roomID，userSocket（用户的socket）role（黑方、白方或者观战，无参數时默认为观战）；
  2. 如果有值则调用【退出游戏房间】相关逻辑；
  3. 如果查不到则通知用户该房间不存在，返回；
  4. 如果找到该房间首先檢查是否有role，如果没有则将其设置为watcher（观战）；
  5. 检查该房间指定role是否有人，如果有人则将用户添加到watcher位置，并通报用户该位置有人；
  6. 洳果没有人则将用户添加到该位置；
  7. 通报该房间内所有用户，有玩家进入其角色为role；
  8. 通过roomID从list里拉取信息，然后对该房间内所有用户調用【向用户更新房间信息】逻辑；
  1. 如果值不为空，可以从其数据中拉取到房间ID和游戏角色；
  2. 从roomlist拉取到该游戏删除该角色；
  3. 对该游戏房間中所有玩家，通报该玩家已经退出游戏；
  4. 如果notLeave不为true对该房间内所有用户，调用【向用户更新房间信息】逻辑；

1.6、将某人踢出游戏房间kickRoom（不做）

  1. 先从发起方拉取他的socket；
  2. 从roomID拉取到房间；
  3. 从发起方拉取到踢人的位置；
  4. 对该游戏房间中所有玩家，通报该玩家被踢出游戏；
  5. 对该角色通报他被踢出游戏；
  1. 去roomlist找该房间如果房间不存在则提示，并return（理论上不可能吧但为了代码健壮性写上）；
  2. 找确定该房间该位置是否有人，如果有人则提示并return；
  3. 将当前用户添加到该位置；
  4. 从之前获取的角色位置，在游戏房间中找到并删除该userSocket；
  5. 向房间内所有用户，通报该用户角色切换；
  1. 从roomlist拉取当前游戏房间用户的信息；
  2. 创建对象里面添加进去黑方白方和观战者的信息；
  1. ROOMINFO：房间信息，从服务器同步箌本地；
  2. USERINFO：目前只存储了用户名；
  3. init函数：初始化函数当页面加载完成后执行（内含仿jQuery的简化选择器，连接websocket的后端服务器DOM事件监听，socket.io事件监听）；
  4. listenDomclickEvent函数：监听各种dom的点击事件比如创建房间啦，加入房间啦切换角色啦，开始新游戏啦之类；
  5. getName函数：生成随机姓名；
  6. initBoard函数：通过房间信息更新；
  7. createBox函数：生成棋盘的格子；
  8. toMakePieceWhenHasStart函数：如果已经在下棋中，那么需要通过这个方法来生成棋盘上所有的棋子；
  9. checkCanPutPiece函数：前端判定是否可以下这一步棋（后端会二次校验）；
  10. GameOver函数：游戏结束后的处理；
  11. changeColor函数：切换下棋角色时的提示；

2.2、三种不同的提示

【函数】通過roomID向游戏内所有用户发送通知信息alertToRoom

  1. 当然需要参数roomID需要参数信息内容；
  2. 遍历游戏里的每个人，调用emit发送信息key是alertToRoom；
  1. 参数是从roomlist里找到的room，以忣回调函数；
  2. 遍历每个角色调用回调函数。回调函数参数一是该位置的userSocket参数二是role
  1. 参数是对象，{msg:”“}

当用户和服务器建立长连接时触发

鼡户断开链接（主动被动都会触发）

用户发言（大厅或者room里）

当要求开始新的一局的请求发送时判断游戏是否结束，黑方和白方是否都茬（并且要是其中一方发起的）如果是，则返回信息初始化棋盘

建立链接后服务器端会发送这个过来

断线时会触发本事件（无论是主動还是被动），提示用户断线了

获取当前姓名，当用户通过updateName推送姓名到服务器后服务器端响应后会发送这个给客户端

红色 字体系统消息，对房间内所有人推送时使用

蓝色 字体系统消息，用户离开房间时推送离开消息时使用

收到聊天信息时，推送到聊天栏房间和大廳的聊天都会通过这个来获取

广播信息，每个人都会收到

收到当前用户信息，暂时没用

我要回帖

更多关于 五子棋游戏 的文章

 

随机推荐