在线五子棋项目

一、项目描述

本项目为一个基于websocket的在线五子棋游戏。

二、项目功能

1.匹配功能

流程如下：

a）客户端点击匹配按钮，给服务器发送匹配请求

b）服务器收到请求之后，会把该客户端的信息放在匹配队列中

c）后端的Match类中包含了一个扫描线程，持续的把从队列取玩家数据，把两个玩家凑成一对，把玩家加入房间（匹配算法暂时没有考虑积分机制，而是直接简单的把两个相邻的玩家凑成一对）

d）匹配完成后，给前端响应

e）前端收到响应请求，初始化游戏。（绘制出棋盘）

2.游戏功能

a）鼠标点击绘制出棋盘上的位置，前端将收到的鼠标点击位置，传给后端

b）后端判断是否可以落子，若不行 ，结束，否则，进行下一步

c）判断游戏是否结束

d）给前端发送响应

【落子函数触发时机：服务器返回数据】

e）若游戏胜负已分，销毁房间即可

f）前端收到响应，若胜负已分，弹出胜负表示（这里直接用alert弹出）

g）若没有分，根据响应内容，决定绘制那种颜色的棋子

3.服务器核心数据结构

a）OnLineUserManager使用ConcurrentHashMap保存当前玩家的在线状态

b）Match类，使用BlockingQueue保存正在进行匹配的玩家

c）RoomManager，使用ConcurrenHashMaP保存房间信息

d）Room使用二维数组保存棋盘信息

三、项目要点

1.HTML 5 <canvas>标签

<canvas>标签定义图形，比如图表和其他图像。
<canvas>标签只是图形容器，必须使用脚本来绘制图形。

2.Websocket

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

三、遇到问题

玩家匹配响应正确，初始化游戏时候的鼠标事件不正确

用户1和用户2的界面都是轮到对方下棋，由此

鼠标事件中均从if(!me)判断出退出函数。

经过判断，是由于me的逻辑写错了，导致两边都不能落子。将me=!me写在判断黑白棋的逻辑中，问题解决