多人HTML5，Node.js，Socket.IO [英] Multiplayer HTML5, Node.js, Socket.IO
问题描述
我尝试使用HTML5 Canvas，JavaScript（也使用John Resig简单继承库）和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:
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。
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.
我有问题如何创建真正的多播放器？像：
打开三个客户端和第一个客户端获取rect1，第二个rect2和最后一个rect3。第一个客户端只能移动rect1，第三个客户端只能移动rect3。
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.
也许有人有想法？我在Google搜索，但找不到答案。
Maybe anyone have idea? I search in Google but don't find answer.
对我的英语很抱歉。
推荐答案
它解释了如何使用requestAnimationFrame等等。
it explains how to use requestAnimationFrame among other things.
其次，游戏状态存在于服务器上并在客户端上进行镜像。
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.
修改后的客户端代码：http://codr.cc/s/d0154536/js
modified client code: http://codr.cc/s/d0154536/js
修改服务器代码： http://codr.cc/s/f96ce1d2/js
这篇关于多人HTML5，Node.js，Socket.IO的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
