window.onload=function(){javascript
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 (){css
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){html
console.log(id) return {x:Number(id.split('_')[0]),y:Number(id.split('_')[1])};
};
var position2Id = function(x,y){java
return x + '_' + y;
};node
console.log('abc');
//判斷落子皇后該色其是否連5
var isHasWinner = function(id,dic){express
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)){json
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');
}