你画我猜---websocket

2019年01月30日22:07:52 更新

看来使用websocket的人不算少数，趁年底工作不是很忙就把代码重构了（不能看以前写的代码，尤其是两年前的，惨不忍睹）一下，完整的实现你画我猜的功能，而且可以点对点，广播等，只是提供一种思路把。代码就不要去优快云下载了直接上github上下载，不知道github的话就去搜索一下，代码在这里。

https://github.com/vector4wang/tomcat8-websocket

演示点我

---

前段时间接触了websocket，具体的就不介绍了，他就是与后台建立长连接，完成信息的发送与接受，有兴趣看我之前的blog或者google一下！之前完成了单聊与多聊的功能，分别实用tomcat7和tomcat8实现！那时候再想做个你画我猜的小游戏，但没有时间！现在终于抽出时间做了一个，有点简陋，看效果（代码是在在tomcat8的单聊与群聊基础上添加的）

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

要选择对放姓名，才可以绘制，对方实时显示，但是有个问题，对方的画板，不连续，因为不是以直线的方式绘制，而是已点的方式绘制（其实就是（x-1,y-1）lineTo(x,y)），传过去的是个坐标，现在就只想到这个方法

 

<span style="font-size:14px;">                                var coordArry = o.data.split("_");
				var x = coordArry[0];
				var y = coordArry[1];
				oGC.lineWidth = 1;	
				oGC.moveTo(x-1,y-1);
				oGC.lineTo(x,y);
				oGC.stroke();</span>

使用的是HTML5 的canvas，绘制直线的代码如下：

 

 

<span style="font-size:14px;">var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();</span>

关于这个可以去W3C去学，那里看起来简单，但是非常的基础，非常的重要

 

你画我猜就是把本地画笔的实时坐标发送给对方，然后根据坐标再绘制出来，思路很简单，就是如何处理这些坐标

代码没有什么改变，就是后台加了个类型，前台加个判断，就ok了，代码不要钱了这次，上传到GITHUB了！

对于以上提到的问题，以后有时间再改，马上双十一了，天天加班啊。，。。。。