您好临谱，本文主要描述如何做一個你畫我猜游戲的demo，需要用到nodejs搭建一個簡單的服務端，兩個不同的客戶端分別是繪畫版與猜猜版涌乳。用到的傳輸方式是socket。
0 服務器js文件
// 導入依賴模塊甜癞，通常需要npm或cnpm下載一下
var webServer = require('ws').Server;
// 創(chuàng)建socket服務器對象
var webs = new webServer({port:3000});
// 創(chuàng)建一個新的數(shù)組用來存放客戶端的個數(shù)
var arr = [];
// 當服務器收到連接請求
webs.on('connection',function(ws){
// 就把該客戶端用數(shù)組儲存起來
arr.push(ws);
// 當服務器收到繪畫客戶端發(fā)送過來信息時
ws.on('message',function(msg){
// 將收到信息發(fā)送給每一個客戶端
for(var i = 0;i<arr.length;i++){
console.log(msg);
// 發(fā)送
arr[i].send(msg);
}
})
})
1 繪畫客戶端html文件
本例為愛狗人士專屬(笑)夕晓，主要用到canvas畫布跟隨鼠標進行繪畫，然后把坐標點與要猜的圖像用文字描述發(fā)送到服務器悠咱。
<!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(){
// 當鼠標在畫布內(nèi)按下時
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);
// 發(fā)送數(shù)據(jù)到服務器
// 首先建立一個對象把屬于以鍵值對的方式存起來
// 如起點位置的x,y值析既、終點位置x,y值躬贡、要猜測的字段
var pos = {'sx':mx,'sy':my,'ex':endx,'ey':endy,'dog':dog};
// 把對象轉(zhuǎn)換成字符串才能發(fā)送
var str = JSON.stringify(pos);
// 發(fā)送
web.send(str);
// 進行繪畫
ctx.stroke();
// 關閉繪畫
ctx.closePath();
// 為了鼠標按下時不斷畫畫，需要把本次繪畫終點定為下次開始繪畫的起點
mx = endx;
my = endy;
}
}
// 如果點擊清除按鈕眼坏，就執(zhí)行清除畫布操作與發(fā)送清除字段到服務器
btn.onclick = function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
web.send('clear');
}
// // 如果點擊切換按鈕
turn.onclick = function(){
// 就隨機一個數(shù)字拂玻，以數(shù)字不同執(zhí)行不同的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;
}
}
}
})
// 接收客戶端發(fā)送的數(shù)據(jù)
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是接受到從服務器發(fā)送過來的數(shù)據(jù)
web.addEventListener('message',function(e){
console.log(e.data);
// 我們通過console就可以知道我們想要的數(shù)據(jù)為e對象里面的data屬性
// 并且e.data的屬性為字符串
console.log(typeof(e.data));
// 如果發(fā)送過來的字符串為清除，就清除當前畫布
if(e.data == 'clear'){
console.log(1);
ctx.clearRect(0,0,canvas.width,canvas.height);
}
// 如果不是就執(zhí)行以下操作
else{
// 先把e.data字符串數(shù)據(jù)轉(zhuǎn)成json對象
// 這樣我們就能使用里面的數(shù)據(jù)了
// 如利用繪畫起點終點進行繪畫
// 猜測字段與本客戶端輸入字段比較是否猜對
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('恭喜你宰译，答對了')
}
// 如果為空則不執(zhí)行任何操作
else if(inp.value==''){
return;
}
// 不一致時
else if(posit.dog!=inp.value){
alert('抱歉檐蚜，答錯了');
}
}
}
})
</script>
</body>
</html>
3 效果
首先打開終端。
終端啟動服務器
用瀏覽器打開畫畫畫html文件與猜猜猜文件沿侈，就可以盡情畫畫了闯第。
畫畫畫頁面
猜猜猜頁面，猜錯了
猜猜猜頁面缀拭，猜對了
4 總結(jié)
畫畫還是需要先學習咳短，然后買數(shù)位板來畫比較好（笑）肃廓。
