多人HTML5，Node.js，Socket.IO

I trying create simple Multi-player with HTML5 Canvas, JavaScript(too using John Resig simple Inheritance library) and Node.js with Socket.IO. My client code:

我尝试使用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();

And server code:

和服务器代码：

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(){

    })

});

And when I run two client's I with first client can move second client Rect and with second client move first client rect and something like with third client can move first and second client rect's.

当我运行两个客户端时，我第一个客户端可以移动第二个客户端Rect，第二个客户端移动第一个客户端矩形，第三个客户端之类的东西可以移动第一个和第二个客户端矩形。

I have question how to create real Multi-Player? something like: Open three client's and first client get rect1, second rect2 and last rect3. First client only can move rect1, client third can move only rect3.

我有问题如何创建真正的多人游戏？类似于：打开三个客户端，第一个客户端获取rect1，第二个rect2和最后一个rect3。第一个客户端只能移动rect1，客户端第三个只能移动rect3。

Maybe anyone have idea? I search in Google but don't find answer.

也许有人有想法？我在谷歌搜索但没有找到答案。

Sorry for my English language.

抱歉我的英语。

4 个解决方案

#1

First, check out http://www.google.com/events/io/2011/sessions/super-browser-2-turbo-hd-remix-introduction-to-html5-game-development.html

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

it explains how to use requestAnimationFrame among other things.

它解释了如何使用requestAnimationFrame等。

Second, the game state should exist on the server and be mirrored on the clients.

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

When a player clicks down, the client should only send a message. The server should then send a message to all the clients, including the client that took the action.

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

Each player should exist as an object on the server. When a player logs in they should be brought up to date about the status of each player already on the server.

每个播放器都应作为服务器上的对象存在。当玩家登录时，他们应该了解服务器上已有的每个玩家的状态。

modified client code: http://codr.cc/s/d0154536/js

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

modified server code: http://codr.cc/s/f96ce1d2/js

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

#2

Glenn Fiedler's What every programmer needs to know about game networking -article is good read for anyone who wants get into game networking. It explains the basics in very high level so that it is adaptable for JS and Socket.io.

Glenn Fiedler的每个程序员需要了解的关于游戏网络的内容 - 对于想要进入游戏网络的人来说，这是一个很好的阅读。它解释了非常高级的基础知识，因此它适用于JS和Socket.io。

#3

In case anyone stumbles across this question as I have just now, I wanted to add this link as an example.

如果有人像我刚才那样偶然发现这个问题，我想添加这个链接作为例子。

I was following the same path as the op several months ago and read every article I could find on the authoritative server model (including the one referenced in the answer by @Epeli), and how to implement it with nodejs/socketio.

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

The result of my research manifested itself in the github project located at the link provided above (there is also a live demo). Hope this helps someone.

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

#4

There is now an open-source multiplayer realtime javascript server (and client library) called Lance.gg, which provides, as you say, a real multiplayer experience

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

It handles client-side prediction, step drift, bending, and basic physics.

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

Disclaimer: I am one of the contributors

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

#1