多人游戏HTML5，Node.js，Socket.IO

我尝试用HTML5 Canvas，JavaScript（使用John Resig简单的inheritance库）和Node.js与Socket.IO创build简单的多人游戏。 我的客户代码：

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

而当我运行两个客户的我与第一个客户端可以移动第二个客户端矩形和第二个客户端移动第一个客户端矩形和类似的第三个客户端可以移动第一个和第二个客户矩形的。

我有问题如何创build真正的多人？ 像这样：打开三个客户端和第一个客户端得到rect1，第二rect2和最后rect3。 第一个客户端只能移动rect1，第三个客户端只能移动rect3。

也许有人有想法？ 我在谷歌search，但没有find答案。

对不起，我的英文。

Answer 1

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

它解释了如何使用requestAnimationFrame等等。

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

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

每个玩家应该作为服务器上的一个对象存在。 当玩家login时，他们应该了解服务器上每个玩家的状态。

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

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

Answer 2

Glenn Fiedler's 每个程序员都需要了解关于游戏networking的内容 – 对于任何想要进入游戏networking的人来说， 它解释了非常高的基础知识，因此它适用于JS和Socket.io。

Answer 3

如果有人像我刚才那样绊倒了这个问题，我想添加这个链接作为例子 。

我几个月前跟随了同一条path，阅读了我在权威服务器模型（包括@Epeli回答中提到的那个）上find的每篇文章，以及如何使用nodejs / socketio实现它。

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

Answer 4

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

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

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