多人 HTML5、Node.js、Socket.IO [英] Multiplayer HTML5, Node.js, Socket.IO
问题描述
我尝试使用 HTML5 Canvas、JavaScript(也使用 John Resig 简单继承库)和带有 Socket.IO 的 Node.js 创建简单的多人游戏.我的客户代码:
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(){
})
});
当我运行两个客户端时，第一个客户端可以移动第二个客户端矩形，第二个客户端移动第一个客户端矩形，而第三个客户端可以移动第一个和第二个客户端矩形.
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
修改服务器代码:http://codr.cc/s/f96ce1d2/js
这篇关于多人 HTML5、Node.js、Socket.IO的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
