我尝试使用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 ='正确';

socket.connect（）;

socket.on（'connect'，function（）{socket.send（）;
    console.log（'Connected！'）;
    玩家=新玩家（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（）;
    }其他{

    }
}）;

socket.on（'disconnect'，function（）{
    console.log（'Disconnected！'）;
}）;

var Player = Class.extend（{
    初始化：函数（x，y）{
        this.x = x;
        this.y = y;
    }，
    setX：function（x）{
        this.x = x;
    }，
    getX：function（）{
        返回this.x;
    }，
    setY：函数（y）{
        this.y = y;
    }，
    getY：function（）{
        返回this.y;
    }，
    画：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（）{
        这.y--;
    }，
    moveLEFT：function（）{
        this.x--;
    }，
    moveDOWN：function（）{
        this.y ++;
    }，
    moveRIGHT：function（）{
        this.x ++;
    }
}）;

函数checkKeyCode（event）{
    var keyCode;
    if（event == null）{
        keyCode = window.event.keyCode;
    }其他{
        keyCode = event.keyCode;
    }

    开关（keyCode）{
        案例38：//向上
            player.moveUP（）;
            socket.send（UP）;
        打破;
        案例37：//向左
            player.moveLEFT（）;
            socket.send（LEFT）;
        打破;
        案例40：// DOWN
            player.moveDOWN（）;
            socket.send（DOWN）;
        打破;
        案例39：//正确
            player.moveRIGHT（）;
            socket.send（RIGHT）;
        打破;
        默认：
        打破;

    }

}

函数update（）{
    player.draw（）;
}

var FPS = 30;
setInterval（function（）{
    update（）;
    player.draw（）;
}，1000 / FPS）；

函数init（）{
    document.onkeydown = checkKeyCode;
}

在里面（）;

和服务器代码：

var http = require（'http'），
    io = require（'socket.io'），
    buffer = new Array（），

服务器= http.createServer（function（req，res）{
    res.writeHead（200，{'Content-Type'：'text / html'}）;
    重发（'
你好，世界
'）;
}）;
server.listen（8080）;

var socket = io.listen（server）;

socket.on（'connection'，function（client）{

    client.on（'message'，function（message）{
        console.log（消息）;
        client.broadcast（消息）;
    }）
    client.on（'disconnect'，function（）{

    }）

}）;

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

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

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

抱歉，我的英语不好，谢谢。

我已经基于客户端/服务器模型创建了一个专门用于创建HTML5实时多人游戏的框架。在此模型中，玩家仅将输入发送到服务器（按键被按下）-游戏在服务器上进行。

服务器将定时的世界快照发送给所有客户端，客户端通过找到两个已知的世界更新（其渲染时间介于两者之间），使自己从当前时间向后说75毫秒。

仓库（包含3个演示）
https://github.com/onedayitwillmake/RealtimeMultiplayerNodeJs

正在运行的Video Box2D演示：http :
//vimeo.com/24149718

JSConf 2011的幻灯片：http ://www.slideshare.net/MarioGonzalez15/realtime-html5-multiplayergameswithnodejs-7868336

它基于Quakeworld和Valve的Source引擎白皮书：
http : //fabiensanglard.net/quakeSource/index.php http://developer.valvesoftware.com/wiki/Source_Multiplayer_Networking