这篇文章将为大家详细讲解有关nodeJs+express+soket.io如何实现五子棋，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
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元素) 的引用。当事件处理程序在事件的冒泡或捕获阶段被调用时;
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>
<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 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');
function(){ //ThinkMarkets智汇入金 http://www.kaifx.cn/question/kaifx/1819.html
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');
}
关于“nodeJs+express+soket.io如何实现五子棋”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
