Estoy tratando de crear varios jugadores con HTML5 Canvas, JavaScript (también usando la biblioteca de herencia simple John Resig) y Node.js con Socket.IO. Mi código de cliente:Multijugador HTML5, Node.js, Socket.IO
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();
Y el código del servidor:
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(){
})
});
Y cuando corro dos de cliente con el primer cliente puede moverse segundo cliente Rect y con el segundo cliente mover primero rect cliente y algo así como con El tercer cliente puede mover el primer y el segundo cliente.
Tengo alguna pregunta sobre cómo crear Multi-Player real? algo así como: Abrir tres clientes y primer cliente obtener rect1, segundo rect2 y último rect3. El primer cliente solo puede mover rect1, el cliente tercero puede mover solo rect3.
Quizás alguien tenga idea? Busco en Google pero no encuentro respuesta.
Lo siento por mi idioma inglés.
Super navegador 2 turbo HD remix introducción al desarrollo de juegos HTML5 es increíble! ¡Gracias por las respuestas! generalhenry, pruebo tu código de cliente/servidor moderado pero para mi no funciona. ¡Pero gracias por ayudarme a entender Multi-Player! – rhavd
No he probado mi código modificado, por lo que es probable que haya algunos errores, pero se tiene la idea^_^ – generalhenry
Todos los enlaces están actualmente muertos por esta respuesta. –