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');
})