Canvas+Socket搞出一个多人游玩的“我画你猜”

时间  2019-11-05
标签 canvas+socket canvas socket 搞出 一个 多人 游玩 栏目 系统网络 繁體版
原文   原文链接

各位看官，很久不见，这篇文章本应该是在2018年的时候与大家见面的，结果由于种种缘由拖到了此时此刻（个人锅啊个人锅），再过一周就要春节了，在这里和你们说一声过年好啊！！！html

今天是个好日子，咱们来一块儿利用socket.io和canvas这两样利器，搞出个简单的《我画你猜》游戏吧git

快过年了，你们放松一下忙碌了一年的紧张神经，玩玩本身搞出来的小游戏吧！github

PS: 若是对接下来讲的即时通讯的实现没有太搞懂的，能够再看看这里express

好吧，天下武功为快不破，赶忙先上个目录结构 json

实现消息的即时通讯

因为以前专门写过文章介绍了socket.io实现即时通讯的内容，那么我这边就尽可能快速写起了canvas

首先经过express来启动一个服务而且来建立socket.io的链接bash

启动服务并创建链接

服务端

// app.js文件
const express = require('express');
const app = express();
// 设置静态文件夹
// 这样设置会自动识别当前文件夹下的index.html文件
app.use(express.static(__dirname));

const server = require('http').createServer(app);
const io = require('socket.io')(server);

server.listen(8888);
复制代码

启动服务，而后访问localhost:8888，就能够访问到index.html文件上的内容了并发

小贴士： app

在客户端访问io的时候有时候会报 io is not defined的错误，就是须要先启动服务后才会自动生成一个 socket.io/socket.io.js文件，如上图所示再去引用就OK了

客户端

// index.js文件

// 用来处理游戏对象数据
let gameObj = {};
// socket实例
let socket = io();
// 监听connect事件
socket.on('connect', () => {
    console.log('客户端链接成功'); 
});
复制代码

到这一步刷新页面在控制台里就能够看到客户端链接成功这7个字了dom

发送/接收/展现消息

写到这里，只是迈出了小小的一步罢了，接下来，咱们马不停蹄继续写下处理消息的逻辑吧

服务端

// app.js

...省略

+++++++++++++++++++++++++++++++++++++++++++++++++++++++
// 区分是聊天仍是在绘图
const LINE = 0;
const MESSAGE = 1;
const userList = ['皮卡丘', '巴大蝴', '比比鸟',  '妙蛙种子', '小火龙', '杰尼龟'];
+++++++++++++++++++++++++++++++++++++++++++++++++++++++

io.on('connection', socket => {
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++
    // 随机分配用户名并发送给全部人
    const user = userList[Math.floor(Math.random() * userList.length)];
    const message = `欢迎${user}加入游戏！！！`;

    // 将数据封装成json对象
    let data = {};
    // 经过type来区分
    data.type = MESSAGE;
    data.sender = '系统';
    data.message = message;
    // 将消息分发出去
    // 消息数据必须是字符串类型，so须要转换一下
    io.emit('message', JSON.stringify(data));

    socket.on('message', msg => {
        // 传过来的消息也是json字符串格式的，须要JSON.parse转成json
        let data = JSON.parse(msg);
        // 若是是聊天类型，就给sender赋值为当前用户名
        if (data.type === MESSAGE) {
            data.sender = user;
        }
        io.emit('message', JSON.stringify(data));
    });
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++
});

server.listen(8888);
复制代码

上面代码里把消息数据都打包成json的格式是为了方便处理，毕竟消息数据只能接收字符串的格式

而后在发送的时候再经过JSON.stringify给转成json字符串，这样就不会致使报错了

固然解析对应的消息数据时再经过JSON.parse来转换成真正的json便可了

服务端发送和接收消息都搞完了，接下来就该客户端出场了，客户端除了上述两个功能以外还会展现消息（听起来屌屌的）

那么，不啰嗦了，快开搞吧！！！

客户端

// index.js文件

++++++++++++++++++++++++++++++++++++++++++++++++++++++
const LINE = 0;
const MESSAGE = 1;
++++++++++++++++++++++++++++++++++++++++++++++++++++++

let gameObj = {};
let socket = io();

++++++++++++++++++++++++++++++++++++++++++++++++++++++
// 监听服务端发来的消息
socket.on('message', msg => {
    // 须要先用JSON.parse转一下
    let data = JSON.parse(msg);
    console.log(data);  // {type: 1, sender: "系统", message: "欢迎皮卡丘进入游戏"}
    
    // 若是类型为聊天
    if (data.type === MESSAGE) {
        let li = `<li><span>${data.sender}： </span>${data.message}</li>`;
        $('#history').append(li);
        // 聊天区域滚动到最新聊天内容位置
        $('#history-wrapper').scrollTop($('#history-wrapper')[0].scrollHeight);
    }
});

// 点击发送按钮发消息
$('#btn').click(sendMsg);
// 按回车键发送消息
$('#input').keyup(e => {
    let keyCode = e.keyCode;
    if (keyCode === 13) {
        sendMsg();
    }
});

// 发送消息函数
function sendMsg() {
    let value = $.trim($('#input').val());
    if (value !== '') {
        let data = {};
        data.type = MESSAGE;
        data.message = value;
        gameObj.socket.send(JSON.stringify(data));
        $('#input').val('');
    }
}

++++++++++++++++++++++++++++++++++++++++++++++++++++++
复制代码

客户端上述代码都作了哪些事情？

  1. 常量区分聊天与绘画
    const LINE = 0;
const MESSAGE = 1;
复制代码
  2. 监听服务端发来的消息
    • 监听消息
    socket.on('message', msg => {});
复制代码
    • 转换消息为json格式
    let data = JSON.parse(msg);
复制代码
    • 消息类型为聊天
    if (data.type === MESSAGE) {
    // 添加内容
    ...省略
    // 滚动到最新消息位置
    ...省略
}
复制代码
  3. 发送消息
    • 发送消息方法
    function sendMsg() { ...省略 }
复制代码
    • 点击or回车发送

以上就是关于消息通讯的基本实现了，下面咱们要进入下一环节，canvas登场了，继续看下去

Canvas来绘制画板

canvas这个元素已经等候多时了，终于轮到它大展身手了，用过canvas的都知道，咱们常见的都是在2d上进行绘图操做，因此在此以前先来获取一下

// index.js文件

const LINE = 0;
const MESSAGE = 1;

++++++++++++++++++++++++++++++++++++++++++++++++++++++
// 用原生来获取，jq对象中并无咱们须要的2d
let cvs = document.getElementById('canvas');
let ctx = cvs.getContext('2d');

let gameObj = {
    // 当前用户是否在绘图
    isDrawing: false,
    // 下一条线的起始点
    startX: 0,
    startY: 0
};
++++++++++++++++++++++++++++++++++++++++++++++++++++++

...省略

socket.on('message', msg => {
    let data = JSON.parse(msg);

    if (data.type === MESSAGE) {
        ...省略
    }
    ++++++++++++++++++++++++++++++++++++++++++++++++++++++
    else if (data.type === LINE) {
        // 这是画线函数，专门绘制所用
        drawLine(ctx, data.startX, data.startY, data.endX, data.endY, 1);
    }
    ++++++++++++++++++++++++++++++++++++++++++++++++++++++
});


// 发送消息函数
...省略

++++++++++++++++++++++++++++++++++++++++++++++++++++++
// 开始在画板上画画了
// 鼠标按下时的操做
$('#canvas').on('mousedown', function(e) {
    let cvsPos = $(this).offset(),
        mouseX = e.pageX - cvsPos.left || 0,
        mouseY = e.pageY - cvsPos.top || 0;

    // 更新一下startX和startY
    gameObj.startX = mouseX;
    gameObj.startY = mouseY;
    // 更新为绘图状态
    gameObj.isDrawing = true;
});
// 鼠标移动时的操做
$('#canvas').on('mousemove', function(e) {
    // 当绘图状态为true的时候才能够绘制
    if (gameObj.isDrawing) {
        let cvsPos = $(this).offset(),
            mouseX = e.pageX - cvsPos.left || 0,
            mouseY = e.pageY - cvsPos.top || 0;

        if (gameObj.startX !== mouseX && gameObj.startY !== mouseY) {
            // 开始绘制线段，drawLine为画线函数
            drawLine(ctx, gameObj.startX, gameObj.startY, mouseX, mouseY, 1, $('#color').val());

            // 既然画线了，那就把画的线段数据也打包成json传给服务端
            let data = {};
            data.startX = gameObj.startX;
            data.startY = gameObj.startY;
            data.endX = mouseX;
            data.endY = mouseY;
            data.type = LINE;
            // 别犹豫，直接经过socket发给服务端
            socket.send(JSON.stringify(data));

            // 这里还要更新一下startX和startY
            gameObj.startX = mouseX;
            gameObj.startY = mouseY;
        }
    }
});

// 鼠标抬起时的操做
$('#canvas').on('mouseup', function() {
    gameObj.isDrawing = false;
});

// 画线函数
function drawLine(ctx, x1, y1, x2, y2, thick) {
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.lineWidth = thick;
    ctx.strokeStyle = '#00a1f4';
    ctx.stroke();
}

++++++++++++++++++++++++++++++++++++++++++++++++++++++
复制代码

别看上面代码忽然多了好多好多，但实际上也无非下面几点，莫慌，咱们来梳理一下

  1. 区分消息为画线的数据
    • 在监听消息的函数里，经过data.type === LINE来区分出来消息类型为画线的数据
  2. 鼠标在canvas上的事件
    • mousedown按下事件
      • 记录点击时的位置
      • 将按下的位置赋给gameObj.startX和gameObj.startY
      • 修改gameObj.isDrawing状态为true
    • mousemove移动事件
      • 记录移动的位置
      • 绘制线段
      • 发送画线数据到服务端
      • 把移动的最新位置更新到gameObj上
    • mouseup抬起事件
      • 修改gameObj.isDrawing状态为初始值false
  3. 实现画线方法
    • ctx.beginPath() - 绘制初始路径
    • ctx.moveTo(x1, y1) - 线段下笔点
    • ctx.lineTo(x2, y2) - 线段移动路径
    • ctx.lineWidth - 线段宽度
    • ctx.storkeStyle - 线段颜色
    • ctx.stroke() - 绘制线段

说难不难，说简单不简单。不过视熟练程度不一样，会有不一样的感觉罢了，多写多练习，知识天然会收录到本身的手中

写到这里基本能够说是socket.io和canvas的要领都掌握了，那么最后的最后，咱们不能忘记文章的标题主旨，是多人游玩，不只仅是简单的自娱自乐，也要众人同乐

那么让咱们再加把劲，实现多人游戏逻辑

构建多人游戏

游戏逻辑

玩游戏嘛，天然有个游戏的逻辑和规则

游戏逻辑在客户端方面的实现相对来讲仍是比较简单的，更多的操做仍是要靠服务端那里了

那么就先由简到难的实现一下吧

客户端

// index.js文件

const LINE = 0;
const MESSAGE = 1;

// 添加个游戏常量
const GAME = 2;

let gameObj = {
    ...省略

    // 游戏状态
    WAITTING: 0,
    START: 1,
    OVER: 2,
    RESTART: 3,
    // 当前轮到谁来绘图
    isPlayer: false
};

...省略

socket.on('message', msg => {
    let data = JSON.parse(msg);

    if (data.type === MESSAGE) {
        ...省略
    } else if (data.type === LINE) {
        ...省略
    } else if (data.type === GAME) { // 若是进行游戏，传过来的type值必须是GAME
        // 经过data.state来判断游戏当前的进度

        // 游戏开始的逻辑
        if (data.state === gameObj.START) {
            // 游戏要是开始了就须要清空画布
            ctx.clearRect(0, 0, cvs.width, cvs.height);

            // 清空聊天记录和隐藏从新开始
            $('#restart').hide();
            $('#history').html('');

            // 区分一下是当前画图的玩家仍是猜图的玩家
            if (data.isPlayer) {
                gameObj.isPlayer = true;
                $('#history').append(`<li>轮到你了，请你画出<span class="answer">${data.answer}</span></li>`);
            } else {
                $('#history').append(`<li>游戏即将开始，请准备，大家有一分钟的时间去猜答案哦</li>`);
            }
        }

        // 游戏结束的逻辑
        if (data.state === gameObj.OVER) {
            gameObj.isPlayer = false;
            $('#restart').show();
            $('#history').append(`<li>本轮游戏的获胜者是<span class="winner">${data.winner}</span>，正确答案是： ${data.answer}</li>`);
        }

        if (data.state === gameObj.RESTART) {
            $('#restart').hide();
            ctx.clearRect(0, 0, cvs.width, cvs.height);
        }
    }
});

...省略

// 画线函数
...省略


// 重玩
$('#restart').on('click', function() {
    let data = {};
    data.type = GAME;
    data.state = gameObj.RESTART;
    socket.send(JSON.stringify(data));
});
复制代码

继续来梳理一下以上代码都作了什么？

  1. 游戏常量区分消息类型及游戏状态
    const GAME = 2;

let gameObj = {
    ...省略
    
    // 游戏状态
    WAITTING: 0,
    START: 1,
    OVER: 2,
    RESTART: 3,
    // 当前轮到谁来绘图
    isPlayer: false
};
复制代码
  2. data.type为GAME表示进行游戏
  3. data.state来判断游戏当前的进度
    • 游戏开始
      • 清空画布
      • 清空聊天记录和隐藏从新开始按钮
      • 经过data.isPlayer来区分是绘图者仍是猜图者以展现不一样文案
    • 游戏结束
      • 显示从新开始按钮
      • 显示获胜者和答案
    • 从新开始
      • 清空画布、隐藏按钮

上述三点就是客户端实现多人游戏的代码了，不要停歇，立刻就要到头了，继续写服务端的逻辑吧

服务端

// app.js文件

...省略

const LINE = 0;
const MESSAGE = 1;

// 添加游戏常量
const GAME = 2;

// 游戏状态和游戏逻辑
const WAITTING = 0;
const START = 1;
const OVER = 2;
const RESTART = 3;

let player = 0;
let wordsList = ['苹果', '运动鞋', '火箭', '足球', '小黄人', '汽车', '小鸟'];
let currentAnswer;
let currentState = WAITTING;
let timer;
// 链接的客户端数量
let len = 0;

io.on('connection', socket => {
    ...省略
    
    // 将数据封装成json对象
    ...省略
    
    
    // 把游戏的消息通知全部人
    let game = {};
    game.type = GAME;
    game.state = WAITTING;
    io.emit('message', JSON.stringify(game));

    // 遍历客户端的链接
    io.clients((err, client) => {
        if (err) throw err;
        len = client.length;
    });

    // 当前状态为等待而且链接数超过两个的时候才开始游戏
    if (currentState === WAITTING && len > 2) {
        startGame(socket);
    }
    
    
    socket.on('message', msg => {
        ...省略
        
        // 判断是否是有玩家答对了
        if (currentState === START && data.message === currentAnswer) {
            let game = {};
            game.type = GAME;
            game.answer = currentAnswer;
            game.winner = user;
            game.state = OVER;
            io.emit('message', JSON.stringify(game));

            currentState = WAITTING;
            
            clearTimeout(timer);
        }

        // 从新开始
        if (data.state === RESTART && data.type === GAME) {
            startGame(socket);
        }
    });
});

// 开始游戏方法
function startGame(socket) {
    // 分配一个玩家来画画
    player = (player + 1) % len;
    // 随机分配个图案
    let random = Math.floor(Math.random() * wordsList.length);
    currentAnswer = wordsList[random];

    // 通知全部玩家游戏开始
    let data = {};
    data.type = GAME;
    data.isPlayer = false;
    data.state = START;
    io.emit('message', JSON.stringify(data));

    // 遍历客户端，而后找到画画的那个用户告诉他相关data
    let count = 0;
    io.clients((err, client) => {
        client.forEach(item => {
            if (count === player) {
                let game = {};
                game.type = GAME;
                game.state = START;
                game.isPlayer = true;
                game.answer = currentAnswer;
                // 这条消息只有绘图的玩家才能看到
                socket.send(JSON.stringify(game));
            }
            count++;
        });
    });

    // 1分钟后游戏结束
    timer = setTimeout(() => {
        let obj = {};
        obj.type = GAME;
        obj.state = OVER;
        obj.winner = '没有人啊！';
        obj.answer = currentAnswer;
        io.emit('message', JSON.stringify(obj));
    }, 60 * 1000);
    
    // 当前状态修改成START
    currentState = START;
}

server.listen(8888);
复制代码

服务端，个人朋友，你刚才都作了什么？

  1. 添加游戏常量以及游戏的状态和逻辑
    // 游戏常量
const GAME = 2;
// 游戏状态
const WAITTING = 0;
...省略
const RESTART = 3;
// 游戏逻辑
let player = 0;
...省略
let len = 0;
复制代码
  2. 初始化游戏和游戏人数
    // 把游戏的消息通知全部人
let game = {};
...省略
io.emit('message', JSON.stringify(game));

// 遍历客户端的链接
io.clients((err, client) => {
    if (err) throw err;
    len = client.length;
});

// 当前状态为等待而且链接数超过两个的时候才开始游戏
if (currentState === WAITTING && len > 2) {
    startGame(socket);
}
复制代码
  3. 开始游戏 - startGame
    • 分配玩家画画
    player = (player + 1) % len;
复制代码
    • 随机分配个图案
    let random = Math.floor(Math.random() * wordsList.length);
currentAnswer = wordsList[random];
复制代码
    • 通知全部玩家游戏开始
    let data = {};
...省略
io.emit('message', JSON.stringify(data));
复制代码
    • 遍历客户端，而后找到画画的那个用户告诉他相关data
    let count = 0;
io.clients((err, client) => {
    client.forEach(item => {
        // 匹配为分配的玩家才能够绘制答案
        if (count === player) {
            let game = {};
            ...省略
            // 这条消息只有绘图的玩家才能看到
            socket.send(JSON.stringify(game));
        }
        count++;
    });
});
复制代码
    • 1分钟游戏结束并改变当前状态
    timer = setTimeout(() => {
    ...省略
}, 60 * 1000);

currentState = START;
复制代码
  4. 监听消息判断是否有人回答正确
    // 判断是否是有玩家答对了
if (currentState === START && data.message === currentAnswer) {
    let game = {};
    game.type = GAME;
    game.answer = currentAnswer;
    game.winner = user;
    game.state = OVER;  // 状态修改成OVER
    // 把该消息数据传递给全部玩家
    io.emit('message', JSON.stringify(game));
    // 恢复当前状态初始值
    currentState = WAITTING;
    // 清空1分钟计时器
    clearTimeout(timer);
}
复制代码

好了，到这里就都结束了，小伙伴们能够跑起来试一试了，固然动手敲起来才是王道了

就写到这里吧，感谢你们一直以来的关照，祝你们2019年猪事顺利了，哈哈，886

最后的最最后： 必须把地址发给你们以做参考啊

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程