Node.js+Socket.io实现双人在线五子棋对战

笔者建议读者在尝试写程序之前要先确保电脑已经安装了Node.js和NPM，一般两者都是在一块安装，五子棋程序的服务器端使用Node.js写的，不多说了，直接上代码。

服务器端代码：socket.js

var app = require('http').createServer(handler)
var io = require('socket.io')(app);
var fs = require('fs');app.listen(80);function handler (req, res) {fs.readFile(__dirname + '/wzq.html',function (err, data) {if (err) {res.writeHead(500);return res.end('Error loading wzq.html');}res.writeHead(200);res.end(data);});}
//io.set('log level',1);
var users = {};
io.on('connection',function(socket){io.sockets.emit('connect',{con:'connected'});socket.on('location',function(from, to, msg){if(to in users){//console.log('to'+to+'   '+msg);users[to].emit('to'+to,msg);}});socket.on('newUser',function(user){if(user in users){socket.emit('exist',{})}else{users[user] = socket;if(users['u2']){io.sockets.emit('stateok',{});}            }});socket.on('disconn',function(){socket.emit('disconnection');})
});

客户端代码：wzq.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><script src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js'></script>
</head><style>
#chess {display: block;margin: 50px auto;box-shadow: -2px -2px 2px #efefef , 5px 5px 5px #b9b9b9;
}
#chess:hover{cursor: pointer;
}
</style>
<body><!-- 棋盘 -->    <input type="radio" name="WZQ" id="black" checked disabled='disabled'><label for="black">黑棋</label><input type="radio" name="WZQ" id="white" disabled='disabled'><label for="white">白棋</label><br/><input type="button" value="连接服务器" id='conn'><input type="button" value="断开服务器" id='disconn'><label id='tipMsg'></label><!-- <input type="text" name="ip" id="ip" placeholder="请输入IP地址，就像这样(ws://192.168.0.1:3000)"> --><canvas id="chess" width="450px" height="450px"></canvas><script>//获取棋盘canvasvar chess = document.getElementById("chess");//获取2d画布var context = chess.getContext('2d');//指定当前是否黑色下，只在UI中使用        var me = true;if(document.getElementById('white').checked) me=false;//指定当前位置是否下了棋子，1代表黑，2代表白，0代表空var curIndex = [];var dsState = false, isclick = false;for(var i =0; i <15; i++) {curIndex[i] = [];for(var j =0; j <15; j++)curIndex[i][j] = 0;}function drawtable() {//我们设置棋盘总共15根横线15根总线，左右上下都有15px的边距，其中每个棋子相距30px,因此绘制棋盘从15px开始for(var i =0; i <15; i++){for(var j =0; j <15; j++){//绘制横线context.moveTo(15, 15 +j *30);context.lineTo(435, 15 +j *30);//绘制竖线context.moveTo(15 +j *30, 15);context.lineTo(15 +j *30, 435); //使用灰色描边context.strokeStyle = "#bfbfbf";context.stroke();}}};drawtable();var socket = io('http://223.2.42.103');socket.on('connect',function(data){document.getElementById('tipMsg').innerHTML='<b>等待对方上线。。。</b>';});if(me) socket.emit('newUser','u1');socket.on('tou2',function(data){//console.log('tou2');var strArr = data.split('-');var xx = parseInt(strArr[0]);var yy = parseInt(strArr[1]);//开始绘制context.beginPath();//绘制指定圆context.arc(15 +xx *30, 15 +yy *30, 15, 0, 2 *Math.PI);//进行填充context.fillStyle = "#636766";curIndex[xx][yy] = 1;document.getElementById('tipMsg').innerText='该你下了';isclick=false;dsState=true;context.fill();//结束绘制context.closePath();});socket.on('tou1',function(data){//console.log('tou1');var strArr = data.split('-');var xx = parseInt(strArr[0]);var yy = parseInt(strArr[1]);//开始绘制context.beginPath();//绘制指定圆context.arc(15 +xx *30, 15 +yy *30, 15, 0, 2 *Math.PI);//进行填充context.fillStyle = "#b9b9b9";curIndex[xx][yy] = 2;document.getElementById('tipMsg').innerText='该你下了';isclick=false;dsState=true;context.fill();//结束绘制context.closePath();});socket.on('exist',function(data){me=!me;document.getElementById('white').checked=true;document.getElementById('black').checked=false;socket.emit('newUser','u2');});socket.on('stateok',function(data){document.getElementById('tipMsg').innerHTML='<b>对方已上线,黑棋先下</b>';if(me){dsState=true;isclick=false;}});chess.onclick = function(event) {if(!dsState||isclick) return;//获取要下的棋子的位置var x = Math.floor(event.offsetX /30);var y = Math.floor(event.offsetY /30);//判断该点是否已被下了if(curIndex[x][y] != 0) return;//开始绘制context.beginPath();//绘制指定圆context.arc(15 +x *30, 15 +y *30, 15, 0, 2 *Math.PI);//进行填充if(me) {context.fillStyle = "#636766";curIndex[x][y] = 1;//me = false;socket.emit('location','u1','u2',x+'-'+y);}else {context.fillStyle = "#b9b9b9";curIndex[x][y] = 2;//me = true;socket.emit('location','u2','u1',x+'-'+y);}context.fill();//结束绘制context.closePath();dsState=false;isclick=true;if(me){document.getElementById('tipMsg').innerText='白棋思考中。。。'}else if(!me){document.getElementById('tipMsg').innerText='黑棋思考中。。。'}};document.getElementById('conn')window.unbeforeunload = function(){socket.emit('disconn');}</script>
</body>
</html>

客户端有些代码没有实现，比如说断开连接和手动开启服务器，这些留给读者自己去实现吧，另外判断是否输赢的代码没有写，笔者觉得吧，会玩五子棋的都能看得出来，就不用再写了，哈哈哈！

Node.js+Socket.io实现双人在线五子棋对战相关推荐

Javascript+Ajax+Node JS +socket .io +mysql 实现在线私人聊天
说明学完Node JS 之后,一直想写一个关于Node的项目,正好了解到html5中的websocket, 所以花了一周时间写了这个在线聊天项目,程序还存在一些功能没有实现,后期会继续开发,实现离线 ...
使用Node.js+Socket.IO搭建WebSocket实时应用
Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. 作 ...
视频教程-Node.JS - socket.io教程-Node.js
Node.JS - socket.io教程全栈开发工程师,现职于北京一家学院的全栈教学主任. 8年前端开发经验.4年移动端开发经验.4年UI设计经验.3年一线教学经验. 精通Node.JS.PHP. ...
Node.js + Socket.io 实现一对一即时聊天
实现一对一即时聊天应用,重要的一点就是消息能够实时的传递,一种方案就是熟知的使用 Websocket 协议,本文中我们使用 Node.js 中的一个框架 http://Socket.io 来实现. 效 ...
vue.js+socket.io+express+mongodb打造在线聊天[一]
vue.js+socket.io+express+mongodb打造在线聊天在线地址观看 http://www.chenleiming.com/vuechat github地址 https://gi ...
基于socket.io的实时在线选座系统
基于socket.io的实时在线选座系统(demo) 前言前段时间公司做一个关于剧院的项目,遇到了这样一种情况. 在高并发多用户同时选座的情况下,假设A用户进入选座页面,正在选择座位,此时还没有提交 ...
使用JS+socket.io+WebRTC+nodejs+express搭建一个简易版远程视频聊天
目录 WebRTC 代码原理及流程源码:git@gitee.com:DieHunter/myCode.git仓库:myCode/videoSteam 前端先附上HTML和CSS 完整的socket ...
Node.js：海量数据大行其道的今天 node.js 在IO方面如何异步非阻塞
以其高性能,异步IO著称,当然node.js 在 stream 上的异步也非常到位. 我们一般理解的异步请求是这样的: 同时处理多件件事件 A,B,C,D,E,F,G .... 如果用.net语言去处 ...
Node.js与io.js那些事儿
去年12月,多位重量级Node.js开发者不满Joyent对Node.js的管理,自立门户创建了io.js.io.js的发展速度非常快,先是于2015年1月份发布了1.0版本,并且很快就达到了2.0版 ...

Node.js+Socket.io实现双人在线五子棋对战

Node.js+Socket.io实现双人在线五子棋对战相关推荐

最新文章

热门文章