多人 HTML5、Node.js、Socket.IO

Posted 2023-03-07

技术标签:

【中文标题】多人 HTML5、Node.js、Socket.IO【英文标题】：Multiplayer HTML5, Node.js, Socket.IO 【发布时间】：2011-09-08 19:26:21 【问题描述】：

我尝试使用 html5 Canvas、javascript（也使用 John Resig 简单继承库）和带有 Socket.IO 的 Node.js 创建简单的多人游戏。我的客户代码：

var canvas  = document.getElementById('game');
var context = canvas.getContext('2d');
var socket  = new io.Socket('127.0.0.1', port: 8080);

var player = null;

var UP    = 'UP',
    LEFT  = 'LEFT',
    DOWN  = 'DOWN',
    RIGHT = 'RIGHT';

socket.connect();

socket.on('connect', function() socket.send();
    console.log('Connected!');
    player = new Player(50, 50);
);

socket.on('message', function(msg) 
    if(msg == 'UP') 
        player.moveUP();
     else if(msg == 'LEFT') 
        player.moveLEFT();
     else if(msg == 'DOWN') 
        player.moveDOWN();
     else if(msg == 'RIGHT') 
        player.moveRIGHT();
     else 

    
);

socket.on('disconnect', function() 
    console.log('Disconnected!');
);

var Player = Class.extend(
    init : function(x, y) 
        this.x = x;
        this.y = y;
    ,
    setX : function(x)
        this.x = x;
    ,
    getX : function()
        return this.x;
    ,
    setY : function(y)
        this.y = y;
    ,
    getY : function()
        return this.y;
    ,
    draw : function()
        context.clearRect(0, 0, 350, 150);
        context.fillRect(this.x, this.y, 15, 15);
    ,
    move : function() 
        this.x += 1;
        this.y += 1;
    ,
    moveUP : function() 
        this.y--;
    ,
    moveLEFT : function() 
        this.x--;
    ,
    moveDOWN : function() 
        this.y++;
    ,
    moveRIGHT : function() 
        this.x++;
    
);

function checkKeyCode(event) 
    var keyCode;
    if(event == null) 
        keyCode = window.event.keyCode;
     else 
        keyCode = event.keyCode;
    

    switch(keyCode) 
        case 38: // UP
            player.moveUP();
            socket.send(UP);
        break;
        case 37: // LEFT
            player.moveLEFT();
            socket.send(LEFT);
        break;
        case 40: //DOWN
            player.moveDOWN();
            socket.send(DOWN);
        break;
        case 39: // RIGHT
            player.moveRIGHT();
            socket.send(RIGHT);
        break;
        default:
        break;

    



function update() 
    player.draw();


var FPS = 30;
setInterval(function() 
    update();
    player.draw();
, 1000/FPS);

function init() 
    document.onkeydown = checkKeyCode;


init();

和服务器代码：

var http = require('http'),
io = require('socket.io'),
buffer = new Array(),

server = http.createServer(function(req, res)
    res.writeHead(200, 'Content-Type': 'text/html');
    res.end('<h1>Hello world</h1>');
);
server.listen(8080);

var socket = io.listen(server);

socket.on('connection', function(client)

    client.on('message', function(message)
        console.log(message);
        client.broadcast(message);
    )
    client.on('disconnect', function()

    )

);

当我运行两个客户端时，第一个客户端可以移动第二个客户端矩形，第二个客户端移动第一个客户端矩形，第三个客户端可以移动第一个和第二个客户端矩形。

我有疑问如何创建真正的多人游戏？就像是：打开三个客户端，第一个客户端得到 rect1，第二个 rect2 和最后一个 rect3。第一个客户端只能移动rect1，第三个客户端只能移动rect3。

也许有人知道吗？我在 Google 中搜索，但没有找到答案。

对不起我的英语。

【问题讨论】：

【参考方案1】：

首先，查看http://www.google.com/events/io/2011/sessions/super-browser-2-turbo-hd-remix-introduction-to-html5-game-development.html

它解释了如何使用 requestAnimationFrame。

其次，游戏状态应该存在于服务器上，并镜像到客户端。

当玩家点击时，客户端应该只发送一条消息。然后，服务器应向所有客户端发送消息，包括执行该操作的客户端。

每个玩家都应该作为一个对象存在于服务器上。当玩家登录时，他们应该被告知已经在服务器上的每个玩家的最新状态。

修改客户端代码：http://codr.cc/s/d0154536/js

修改后的服务器代码：http://codr.cc/s/f96ce1d2/js

【讨论】：

超级浏览器 2 turbo 高清混音介绍 HTML5 游戏开发太棒了！感谢您的回答！ generalhenry，我尝试了您修改过的客户端/服务器代码，但因为我不起作用。但是感谢您帮助我了解 Multi-Player！我没有测试我修改后的代码，所以可能有一些错误，但你明白了^_^ 所有链接目前都已从此答案中失效。答案中的第一个链接坏了【参考方案2】：

Glenn Fiedler 的What every programmer needs to know about game networking - 文章适合任何想要进入游戏网络的人阅读。它非常高层次地解释了基础知识，因此它适用于 JS 和 Socket.io。

【讨论】：

出色的资源。谢谢:)【参考方案3】：

如果有人像我刚才一样偶然发现这个问题，我想添加this link as an example。

几个月前，我走的是与 op 相同的道路，并阅读了我能找到的关于权威服务器模型的每一篇文章（包括@Epeli 在答案中引用的文章），以及如何使用 nodejs/socketio 实现它。

我的研究结果体现在上面提供的链接中的 github 项目中（还有一个现场演示）。希望这对某人有所帮助。

【讨论】：

【参考方案4】：

现在有一个名为Lance.gg 的开源多人实时javascript 服务器（和客户端库），如您所说，它提供了， 真正的多人游戏体验

它处理客户端预测、步进漂移、弯曲和基本物理。

免责声明：我是贡献者之一

【讨论】：