您好，本文主要描述如何做一个你画我猜游戏的demo，需要用到nodejs搭建一个简单的服务端，两个不同的客户端分别是绘画版与猜猜版。用到的传输方式是socket。
0 服务器js文件
// 导入依赖模块，通常需要npm或cnpm下载一下
var webServer = require('ws').Server;
// 创建socket服务器对象
var webs = new webServer({port:3000});
// 创建一个新的数组用来存放客户端的个数
var arr = [];
// 当服务器收到连接请求
webs.on('connection',function(ws){
// 就把该客户端用数组储存起来
arr.push(ws);
// 当服务器收到绘画客户端发送过来信息时
ws.on('message',function(msg){
// 将收到信息发送给每一个客户端
for(var i = 0;i<arr.length;i++){
console.log(msg);
// 发送
arr[i].send(msg);
}
})
})
1 绘画客户端html文件
本例为爱狗人士专属(笑)，主要用到canvas画布跟随鼠标进行绘画，然后把坐标点与要猜的图像用文字描述发送到服务器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>画画画</title>
<style type="text/css">
*{
margin: 0;
}
canvas{
border: 2px gainsboro solid;
}
#show{
display: inline-block;
width: 400px;
height: 400px;
}
#show img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
<input type="button" id="btn" value="清除"/>
<div id="show">
<input type="button" name="turn" id="turn" value="切换图片" />
</div>
<script type="text/javascript">
// 获取对象
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 两个按钮 一个为清除画布，一个为切换图片
var btn = document.getElementById('btn');
var turn = document.getElementById('turn');
var img = document.getElementsByTagName('img')[0];
// 初始化 要猜的字段
var dog = '萨摩';
// 新建客户端对象，连接的服务器为ws://localhost:3000/
var web = new WebSocket('ws://localhost:3000/');
// 为客户端对象绑定连接成功后的方法
web.addEventListener('open',function(){
// 当鼠标在画布内按下时
canvas.onmousedown = function(e){
// 获取当前鼠标位置
var e = e||window.event;
var mx = e.clientX-2;//减去画布边框距离
var my = e.clientY-2;
// 当鼠标移动时
canvas.onmousemove = function(e){
// 开始绘画路径
ctx.beginPath();
// 绘画线宽为4px
ctx.lineWidth = 4;
// 线冒样式为圆形
ctx.lineCap = 'round';
// 起点设置为鼠标按下时的那个点
ctx.moveTo(mx,my);
// 再次获取移动后的鼠标位置
var e = e||window.event;
var endx = e.clientX-2;
var endy = e.clientY-2;
// 以移动后的点为绘画终点
ctx.lineTo(endx,endy);
// 发送数据到服务器
// 首先建立一个对象把属于以键值对的方式存起来
// 如起点位置的x,y值、终点位置x,y值、要猜测的字段
var pos = {'sx':mx,'sy':my,'ex':endx,'ey':endy,'dog':dog};
// 把对象转换成字符串才能发送
var str = JSON.stringify(pos);
// 发送
web.send(str);
// 进行绘画
ctx.stroke();
// 关闭绘画
ctx.closePath();
// 为了鼠标按下时不断画画，需要把本次绘画终点定为下次开始绘画的起点
mx = endx;
my = endy;
}
}
// 如果点击清除按钮，就执行清除画布操作与发送清除字段到服务器
btn.onclick = function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
web.send('clear');
}
// // 如果点击切换按钮
turn.onclick = function(){
// 就随机一个数字，以数字不同执行不同的case（0至6张图）
var num = Math.floor(Math.random()*7);
switch(num){
case 0:{
// 修改图片的src
img.src = 'img/ban.jpg';
// 修改猜测字段
dog = '斑点狗';
break;
}
case 1:{
img.src = 'img/chai.jpg';
dog = '柴犬';
break;
}
case 2:{
img.src = 'img/dou.jpg';
dog = '斗牛犬';
break;
}
case 3:{
img.src = 'img/gold.jpg';
dog = '金毛';
break;
}
case 4:{
img.src = 'img/ha.jpg';
dog = '哈士奇';
break;
}
case 5:{
img.src = 'img/samo.jpg';
dog = '萨摩';
break;
}
case 6:{
img.src = 'img/tugou.jpg';
dog = '土狗';
break;
}
}
}
})
// 接收客户端发送的数据
web.addEventListener('message',function(e){
console.log(e);
})
// 当鼠标松开时停止绘画
document.onmouseup = function(){
canvas.onmousemove = null;
}
</script>
</body>
</html>
2 猜猜猜客户端html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>猜猜猜</title>
<style type="text/css">
*{
margin: 0;
list-style: none;
}
canvas{
border: 2px gainsboro solid;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
<li>请输入您的答案：<input type="text" name="" id="inp"/></li>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var inp = document.getElementById('inp');
var ctx = canvas.getContext('2d');
var web = new WebSocket('ws://localhost:3000/');
// 为客户端对象绑定连接成功后的方法
web.addEventListener('open',function(){
console.log(1);
}
// e是接受到从服务器发送过来的数据
web.addEventListener('message',function(e){
console.log(e.data);
// 我们通过console就可以知道我们想要的数据为e对象里面的data属性
// 并且e.data的属性为字符串
console.log(typeof(e.data));
// 如果发送过来的字符串为清除，就清除当前画布
if(e.data == 'clear'){
console.log(1);
ctx.clearRect(0,0,canvas.width,canvas.height);
}
// 如果不是就执行以下操作
else{
// 先把e.data字符串数据转成json对象
// 这样我们就能使用里面的数据了
// 如利用绘画起点终点进行绘画
// 猜测字段与本客户端输入字段比较是否猜对
var posit = JSON.parse(e.data);
console.log(posit);
// 猜猜猜客户端进行绘画
ctx.beginPath();
ctx.lineWidth = 4;
ctx.lineCap = 'round';
ctx.moveTo(posit.sx+2,posit.sy+2);
ctx.lineTo(posit.ex+2,posit.ey+2);
ctx.stroke();
ctx.closePath();
// 当输入框失去焦点时做判断
inp.onblur = function(){
// 一致时
if(posit.dog==inp.value){
alert('恭喜你，答对了')
}
// 如果为空则不执行任何操作
else if(inp.value==''){
return;
}
// 不一致时
else if(posit.dog!=inp.value){
alert('抱歉，答错了');
}
}
}
})
</script>
</body>
</html>
3 效果
首先打开终端。
终端启动服务器
用浏览器打开画画画html文件与猜猜猜文件，就可以尽情画画了。
画画画页面
猜猜猜页面，猜错了
猜猜猜页面，猜对了
4 总结
画画还是需要先学习，然后买数位板来画比较好（笑）。
网友评论