多人HTML5，Node.js，Socket.IO

Question

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

    })

});

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

我有疑问如何创建真正的多层播放器？像这样：打开三个客户端，第一个客户端获取rect1，第二个rect2和最后一个rect3。第一个客户端只能移动rect1，第三个客户端只能移动rect3。

也许有人有主意吗？我在Google中搜索，但找不到答案。

对不起，我的英语。

Answer 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