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

2024-09-28 20:13:24

本文实例为大家分享了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>
        //获取棋盘canvas
        var 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>

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

基于JavaScript实现五子棋游戏

本文实例为大家分享了js实现五子棋的具体代码,供大家参考,具体内容如下思路: 1.先用canvas画五子棋的棋盘 2.获取鼠标点击的位置 3.根据鼠标点击的位置判断,并画棋子 4.根据下的棋子判断是否赢了代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style>
JS canvas绘制五子棋的棋盘

本文为大家分享了JS canvas绘制五子棋棋盘的具体代码,供大家参考,具体内容如下 box-shadow:给元素块周边添加阴影效果. 语法:box-shadow: h-shadow v-shadow blur spread color inset: h-shadow: (必须)阴影的水平偏移量,如果是正值,则阴影在元素块右边:如果是负值,则阴影在元素块左边. v-shadow: (必须)阴影的垂直偏移量,如果是正值,则阴影在元素块底部:如果是负值,则阴影在元素块顶部. blur: (可选)阴影
js实现网页五子棋进阶版

本文实例为大家分享了js实现网页五子棋进阶版的具体代码,供大家参考,具体内容如下对比上一版本增加了音效和计时器两个模块. 代码如下 <!doctype html> <html> <head> <meta charset="utf-8"> <title>五子棋</title> <!-- <script src="https://cdn.staticfile.org
JavaScript+canvas实现五子棋游戏

本文实例为大家分享了JavaScript+canvas实现五子棋游戏的具体代码,供大家参考,具体内容如下效果截图: 代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia
node.js利用socket.io实现多人在线匹配联机五子棋

项目地址,已上传github --> client端使用简单的h5+js实现了棋局的总体布局. server端使用node的socket.io模块与客户端进行数据交互,棋子的落点和输赢校验均是在server端完成. 五子棋ui界面请见.. client端的界面这里就不做过多解释了,只要稍微懂点h5就可以自行去这里下载源代码观看,因为今天的主题主要是socket.io这一块,所以本章只概述client和server是如何通过tcp连接进行交互的. 首先先带大家看一下目录结构 | server.j
js数组案例之五子棋游戏

本文实例为大家分享了js实现五子棋游戏的具体代码,供大家参考,具体内容如下一.效果图二.设计思路第一步:创建棋盘,生成棋盘所对应的数组坐标.第二步:鼠标点击当前位置返回当前点的坐标.第三步:生成对应的棋子.第四步:添加悔棋.重新开始事件.第五步:设置棋子输赢,若某个棋子五个连成一条线,则该棋子赢. 三.核心代码 //1.创建棋盘 var item = document.querySelector(".item-map"); var itemchild = document.que
纯JS实现五子棋游戏兼容各浏览器(附源码)

纯JS五子棋(各浏览器兼容) 效果图: 代码下载 HTML代码复制代码代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;"> <title>五子棋</title> <link rel="stylesheet" type="text/
js+html实现网页五子棋

本文实例为大家分享了js+html实现网页五子棋的具体代码,供大家参考,具体内容如下最终效果图: 废话不多说,上源码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>五子棋</title> <!-- <script src="https://cdn.staticfile.org/jquer
H5+C3+JS实现五子棋游戏（AI篇）

本文实例为大家分享了H5+C3+JS实现五子棋游戏的具体代码,供大家参考,具体内容如下新增全局变量 <script> //所有赢法总和 var count = 0; //容纳所有赢法的三维数组 var allWin = []; for(var i =0; i <15; i++){ allWin[i] = []; for(var j=0; j <15; j++){ allWin[i][j] = []; } } //横线赢法 for(var i =0; i <15; i++){
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法

这只是一个简单的JAVAscript和HTML5小程序,没有实现人机对战. 五子棋棋盘落子点对应的二维数组.数组的元素对应落子点.比如数组元素值为0表示该元素对应的落子点没有棋子,数组元素值为1表示该元素对应的落子点有白棋子,数组元素值为2表示该元素对应的落子点有黑棋子: 判断五子棋赢棋的算法是通过对五子棋棋盘落子点对应的二维数组的操作来实现的. 判断五子棋赢棋算法下边的函数可以实现判断五子棋赢棋的算法,也可以按照教材中相应的算法实现. 其中函数的参数xx.yy为数组下标,chess数组实现五

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

相关推荐

随机推荐