nodeJs五子棋實戰

window.onload=function(){

var sence = document.getElementById('sence'),
    //棋盤大小
    ROW = 20,NUM = ROW*ROW,

    //場景寬度
    senceWidth = sence.offsetWidth,

    //每顆棋子的寬度
    blockWidth = Math.floor( (senceWidth-ROW)/ROW ) + 'px',
     //用戶開始默承認以落子
    canDrop = true,

    //用戶默認落子爲白棋
    color = 'white',
    //兩個字典，用來存放白棋和黑棋的已落子的位置；以座標爲建，值爲true
    whiteBlocks = {},blackBlocks = {};
    console.log(sence);

//建立場景
(function (){

var el,
//在棋盤上畫線
    rowline,
    colline;
for ( var i = 0;i < ROW;i++){
    //按照計算好的間隔放置橫線
    rowline = document.createElement('div');
    rowline.setAttribute('class','row');
    rowline.style.top= (senceWidth/ROW)/2 + (senceWidth/ROW)*i + 'px';
    sence.appendChild(rowline);

    //按照計算好的間隔放置豎線
    colline = document.createElement('div');
    colline.setAttribute('class','col');
    colline.style.left= (senceWidth/ROW)/2 + (senceWidth/ROW)*i + 'px';
    sence.appendChild(colline);
    
    for ( var j = 0;j < ROW;j++){
        el = document.createElement('div');
        el.style.width = blockWidth;
        el.style.height = blockWidth;
        el.setAttribute('class','block');
        el.setAttribute('id',i + '_' + j);
        sence.appendChild(el);
    }
}

})();
console.log('1')
var id2Position = function(id){

console.log(id)
return {x:Number(id.split('_')[0]),y:Number(id.split('_')[1])};

};
var position2Id = function(x,y){

return x + '_' + y;

};

console.log('abc');
//判斷落子皇后該色其是否連5
var isHasWinner = function(id,dic){

var x = id2Position(id).x;
var y = id2Position(id).y;

//用來記錄橫，豎，左斜，右斜方向的連續棋子數量
var rowCount = 1,colCout = 1,leftSkewLineCount = 1,righeSkewlineCount = 1;
//tx ty做爲遊標，左移，右移，上移，下移，左上，右下，左下，右上移動
//每次數萬某個方向的連續棋子後，遊標會回到原點

var tx,ty;
//注意：一下判斷5連以上不算成功，若是規則有變更，條件改成大於五就能夠
tx = x;ty = y;
while(dic[ position2Id(tx,ty+1) ]){
    rowCount++;
    ty++;
}
tx = x;ty = y;
while(dic[ position2Id(tx,ty-1) ]){
    rowCount++;
    ty--;
};
if( rowCount ==5 ) return true;

tx = x;ty = y;
while(dic[ position2Id(tx+1,ty) ]){

    colCout++;
    tx++;
}
tx = x;ty = y;
while(dic[ position2Id(tx-1,ty) ]){
    colCout++;
    tx--;
};
if( colCout ==5 ) return true;


tx = x;ty = y;
while(dic[ position2Id(tx+1,ty+1) ]){
    leftSkewLineCount++;
    tx++;
    ty++;
}
tx = x;ty = y;
while(dic[ position2Id(tx-1,ty-1) ]){
    leftSkewLineCount++;
    tx--;
    ty--;
}
if( leftSkewLineCount == 5){
    return true;
}


tx = x;ty = y;
while(dic[ position2Id(tx-1,ty+1) ]){
    righeSkewlineCount++;
    tx--;
    ty++;
}
tx = x;ty = y;
while(dic[ position2Id(tx+1,ty-1) ]){
    leftSkewLineCount++;
    tx++;
    ty--;
}
if( righeSkewlineCount == 5) return true;
return false;

};
//處理對手發送過來的信息；
// var socket = io.connect('http://127.0.0.1:3100');
if (/Firefox/s/.test(navigator.userAgent)){

var socket = io.connect('http://127.0.0.1:3100',{transports:['xhr-polling']});

}
else if (/MSIE (d+.d+);/.test(navigator.userAgent)){

var socket = io.connect('http://127.0.0.1:3100',{transports:['jsonp-polling']});

}
else {

var socket = io.connect('http://127.0.0.1:3100');

}

socket.on('message',function(data){
    // console.log('data');
    canDrop = true;
    var el = document.getElementById(data.id);
    // console.log(el)
    el.setAttribute('has-one','true');
    if(data.color == 'white'){
        color = 'black';
        el.setAttribute('class','block white');
        whiteBlocks[data.id] = true;
         if(isHasWinner(data.id,whiteBlocks)){
             alert('白棋贏了');
             location.reload();//Location.reload() 方法用來刷新當前頁面。該方法只有一個參數，當值爲 true 時，將強制瀏覽器從服務器加載頁面資源，當值爲 false 或者未傳參時，瀏覽器則可能從緩存中讀取頁面。
         }
        }else{ 
             el.setAttribute('class','block black');
             blackBlocks[data.id] = true;
             if( isHasWinner(data.id,blackBlocks)){
                 alert('黑棋贏了');
                 location.reload();
             }
         }
    });

    sence.onclick = function(e){ 
        // console.log('gyu')
         var el = e.target;//觸發事件的對象 (某個DOM元素) 的引用。當事件處理程序在事件的冒泡或捕獲階段被調用時;
 function(){ //亨達全球HantecGlobal代理申請 http://www.kaifx.cn/broker/hantecglobal.html
         if( !canDrop || el.hasAttribute('has-one') || el == this){//hasAttributes屬性返回一個布爾值true或false,來代表當前元素節點是否有至少一個的屬性
            return;
         }
         el.setAttribute('has-one','true');
         canDrop = false;
         var id = el.getAttribute('id');
         if(color == 'white'){
             el.setAttribute('class','block white');
             whiteBlocks[id] = true;
             socket.emit('message',{id:id,color:'white'});//socket.emit('action',data);表示發送了一個action命令，還有data數據，在另外一端接收時，能夠這麼寫： socket.on('action',function(data){...});
             if(isHasWinner(id,whiteBlocks)){
                 alert('白棋贏');
                 location.reload();
             }
         }
         if( color == 'black'){
             el.setAttribute('class','block black');
             blackBlocks[id]=true;
             socket.emit('message' , {id:id,color:'black'});
             if(isHasWinner(id,blackBlocks)){
                 alert('黑棋贏了');
                 location.reload();
             }
         }
   
 };

};

樣式index.css
body{

background: #4b4832;
font-family: 微軟雅黑;
color: #666;

}
.sence{

width: 600px;
height: 600px;
margin: 50px auto;
border-right: none;
border-bottom: none;
position: relative;
box-shadow: -10px 10px 15px black;
background: #8d6d45;
border: 2px solid black;

}
.sence .block{

float: left;
margin-right: 1px;
margin-bottom: 1px;
border-radius: 50%;
position: relative;
z-index: 8884;

}
.sence .row,.sence .col{

background: #4d392b;
position: absolute;

}
.sence .row{

width:100%;
height: 1px;
top: 0;

}
.sence .col{

width:1px;
height: 100%;
top: 0;

}
.white{

background: #ffffff;

}
.black{

background: #2c1d1b;

}
index.html:
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>五子棋</title>
<link rel="stylesheet" href="./public/index.css">

</head>
<body>

<div class="sence" id="sence"></div>
<script src="/public/socket.io.js"></script>
<script src="/public/index.js" type="text/javascript" ></script>

</body>
</html>
服務端index.js
var express = require('express');
var path = require('path');
var app = express()
var http = require('http').Server(app);
var io = require('socket.io')(http);

io.on('connection',function(socket){

socket.on('message',function(data){
    socket.broadcast.emit('message',data);
});

});
app.use('/public/',express.static(path.join(__dirname,'./public/')))
app.use('/node_modules/',express.static(path.join(__dirname,'./node_modules/')))
app.get('/',function(req,res){

res.sendFile(__dirname +  '/index.html');

});

http.listen(3100,function(){

console.log('runing...')

})
socket.io 兼容性代碼：
if (/Firefox/s/.test(navigator.userAgent)){

var socket = io.connect('http://127.0.0.1:3100',{transports:['xhr-polling']});

}
else if (/MSIE (d+.d+);/.test(navigator.userAgent)){

var socket = io.connect('http://127.0.0.1:3100',{transports:['jsonp-polling']});

}
else {

var socket = io.connect('http://127.0.0.1:3100');

}