标签：
index.html
<!doctype html> <html> <head> <title>Socket.IO chat</title> <style> *{ margin: 0; } </style> </head> <body> <canvas id="can" width="600" height="600" style="border: 1px solid #000; background: url(bak.jpg);"></canvas> <script src="http://code.jquery.com/jquery-1.11.1.js"></script> <script src="/socket.io/socket.io.js"></script> <script> var socket=io(); var oC=document.getElementById(‘can‘); var oCtx=oC.getContext(‘2d‘); var cWidth=oC.width; var cHeight=oC.height; var black=new Image(); var white=new Image(); black.src=‘black.png‘; white.src=‘white.png‘; var disArr,isBlack; oCtx.lineWidth=‘4px‘; oCtx.fillStyle=‘#ddd‘ socket.on(‘chat message‘,function(msg){ if(msg.disArr){ disArr=msg.disArr; for(var i=0;i<disArr.length;i++){ for(var j=0;j<disArr.length;j++){ if(disArr[i][j]==2){ oCtx.drawImage(black,i*40-20,j*40-20); }else if(disArr[i][j]==1){ oCtx.drawImage(white,i*40-20,j*40-20); } } } }else{ disArr=new Array(15); for(var i=0;i<disArr.length;i++){ disArr[i]=new Array(15); } for(var i=0;i<disArr.length;i++){ oCtx.beginPath(); oCtx.moveTo(i*40-2,0); oCtx.lineTo(i*40-2,cHeight); oCtx.closePath(); oCtx.stroke(); for(var j=0;j<disArr[i].length;j++){ disArr[i][j]=0; oCtx.beginPath(); oCtx.moveTo(0,j*40-2); oCtx.lineTo(oC.width,j*40-2); oCtx.closePath(); oCtx.stroke(); } } } if(msg.isBlack!==undefined){ isBlack=msg.isBlack }else{ isBlack=false; } }); oC.onclick=clickEvent; function clickEvent(ev){ if(!disArr){ disArr=new Array(15); for(var i=0;i<disArr.length;i++){ disArr[i]=new Array(15); } for(var i=0;i<disArr.length;i++){ oCtx.beginPath(); oCtx.moveTo(i*40-2,0); oCtx.lineTo(i*40-2,cHeight); oCtx.closePath(); oCtx.stroke(); for(var j=0;j<disArr[i].length;j++){ disArr[i][j]=0; oCtx.beginPath(); oCtx.moveTo(0,j*40-2); oCtx.lineTo(oC.width,j*40-2); oCtx.closePath(); oCtx.stroke(); } } } if(!ev){ return } var col=parseInt(ev.clientX/40)+parseInt(ev.clientX%40>20?1:0); var row=parseInt(ev.clientY/40)+parseInt(ev.clientY%40>20?1:0); if(col==0||row==0||col==15||row==15||disArr[col][row]!==0){//边界的不能下棋 return; } if(isBlack){ oCtx.drawImage(black,col*40-20,row*40-20); disArr[col][row]=2; isWin(2,col,row) } else{ oCtx.drawImage(white,col*40-20,row*40-20); disArr[col][row]=1; isWin(1,col,row) } isBlack=!isBlack; socket.emit(‘chat message‘,{ ‘disArr‘:disArr, ‘isBlack‘:isBlack }); } clickEvent(); function isWin(type,col,row){ var x=col; var y=row; var total=1; var zhType=type==1?‘白子‘:‘黑子‘; //横向判断 //左边 while(--x>0){ if(disArr[x][y]==type){ total++; }else{ break; } } //右边 x=col; while(++x<15){ if(disArr[x][y]==type){ total++; }else{ break; } } if(total>=5){ alert(zhType+‘赢了‘+total); return; } //横向判断end //竖向判断 y=row; x=col; total=1; //上方 while(--y>0){ if(disArr[x][y]==type){ total++; }else{ break; } } //下方 y=row; while(++y<15){ if(disArr[x][y]==type){ total++; }else{ break; } } if(total>=5){ alert(zhType+‘赢了‘+total); return; } //竖向判断end //斜向判断 y=row; x=col; total=1; //斜向判断end //左上右下 //左上 while(--x>0&&--y>0){ if(disArr[x][y]==type){ total++; }else{ break; } } //右下 y=row; x=col; while(++x>0&&++y>0){ if(disArr[x][y]==type){ total++; }else{ break; } } if(total>=5){ alert(zhType+‘赢了‘+total); return; } //右上左下 //右上 y=row; x=col; total=1; while(++x<15&&--y>0){ if(disArr[x][y]==type){ total++; }else{ break; } } y=row; x=col; while(--x>0&&++y<15){ if(disArr[x][y]==type){ total++; }else{ break; } } if(total>=5){ alert(zhType+‘赢了‘+total); return; } } </script> </body> </html>
index.js
var app=require(‘express‘)(); var http=require(‘http‘).Server(app); var io=require(‘socket.io‘)(http); app.get(‘/‘, function(req, res){ res.sendFile(__dirname+‘/index.html‘); }); app.get(‘/bak.jpg‘, function(req, res){ res.sendFile(__dirname+‘/bak.jpg‘); }); app.get(‘/black.png‘, function(req, res){ res.sendFile(__dirname+‘/black.png‘); }); app.get(‘/white.png‘, function(req, res){ res.sendFile(__dirname+‘/white.png‘); }); io.on(‘connection‘,function(socket){ socket.on(‘chat message‘,function(msg){ io.emit(‘chat message‘,msg); }); }); http.listen(3000,function(){ console.log(‘listening on 3000‘); })
标签：
原文地址：http://www.cnblogs.com/obeing/p/5400306.html
