Multijogador HTML5, Node.js, Socket.IO [fechado]


13

Estou tentando criar Multi-player simples com HTML5 Canvas, JavaScript (também usando a biblioteca de herança simples John Resig) e Node.js com Socket.IO. O meu código de cliente:

var canvas = document.getElementById ('jogo');
var contexto = canvas.getContext ('2d');
var socket = new io.Socket ('127.0.0.1', {porta: 8080});

var player = nulo;

var UP = 'UP',
    ESQUERDA = 'ESQUERDA',
    PARA BAIXO = 'PARA BAIXO',
    DIREITA = 'DIREITA';

socket.connect ();

socket.on ('connect', function () {socket.send ();
    console.log ('Conectado!');
    jogador = novo jogador (50, 50);
});

socket.on ('mensagem', função (msg) {
    if (msg == 'UP') {
        player.moveUP ();
    } senão se (msg == 'ESQUERDA') {
        player.moveLEFT ();
    } senão se (msg == 'DOWN') {
        player.moveDOWN ();
    } senão se (msg == 'DIREITA') {
        player.moveRIGHT ();
    } outro {

    }
});

socket.on ('desconectar', function () {
    console.log ('Desconectado!');
});

var Player = Class.extend ({
    init: função (x, y) {
        this.x = x;
        this.y = y;
    }
    setX: function (x) {
        this.x = x;
    }
    getX: function () {
        retorne this.x;
    }
    setY: função (y) {
        this.y = y;
    }
    getY: function () {
        retorne 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 ++;
    }
});

função checkKeyCode (event) {
    var keyCode;
    if (event == null) {
        keyCode = window.event.keyCode;
    } outro {
        keyCode = event.keyCode;
    }

    switch (keyCode) {
        caso 38: // UP
            player.moveUP ();
            socket.send (UP);
        pausa;
        processo 37: // ESQUERDA
            player.moveLEFT ();
            socket.send (ESQUERDA);
        pausa;
        case 40: // DOWN
            player.moveDOWN ();
            socket.send (DOWN);
        pausa;
        caso 39: // DIREITO
            player.moveRIGHT ();
            socket.send (DIREITO);
        pausa;
        padrão:
        pausa;

    }

}

função update () {
    player.draw ();
}

var FPS = 30;
setInterval (function () {
    atualizar();
    player.draw ();
} 1000 / FPS);

função init () {
    document.onkeydown = checkKeyCode;
}

iniciar();

E código do servidor:

var http = require ('http'),
    io = require ('socket.io'),
    buffer = nova matriz (),

server = http.createServer (função (req, res) {
    res.writeHead (200, {'Tipo de Conteúdo': 'text / html'});
    reenviar('

Olá Mundo

'); }); server.listen (8080); var socket = io.listen (servidor); socket.on ('conexão', função (cliente) { client.on ('message', function (message) { console.log (mensagem); client.broadcast (mensagem); }) client.on ('desconectar', function () { }) });

E quando eu executo dois clientes, o I com o primeiro cliente pode mover o segundo cliente Rect e o segundo cliente mover o primeiro cliente ret e algo como o terceiro cliente pode mover o primeiro e o segundo cliente ret.

Eu tenho uma pergunta como criar Multi-Player real? algo como: Abra três clientes e o primeiro cliente recebe rect1, segundo rect2 e último rect3. O primeiro cliente pode mover apenas rect1, o terceiro cliente pode mover apenas rect3.

Talvez alguém tenha ideia? Pesquiso no Google, mas não encontro resposta.

Desculpe pelo meu idioma inglês, obrigado.

Respostas:


15

Eu criei uma estrutura especificamente para a criação de jogos multiplayer em tempo real HTML5, com base no modelo Cliente / Servidor. Nesse modelo, os jogadores enviam apenas entrada para o servidor (pressionando as teclas) - e o jogo ocorre no servidor.

O servidor envia instantâneos instantâneos do mundo para todos os clientes, e os clientes se informam, digamos, 75 ms no tempo atual, encontrando duas atualizações mundiais conhecidas em que o tempo de execução se situa.

Repositório (contém 3 demos)
https://github.com/onedayitwillmake/RealtimeMultiplayerNodeJs

Demonstração do Video Box2D em ação:
http://vimeo.com/24149718

Slides do JSConf 2011:
http://www.slideshare.net/MarioGonzalez15/realtime-html5-multiplayergameswithnodejs-7868336

Baseia-se nos documentos técnicos do Quakeworld e do mecanismo Source da Valve:
http://fabiensanglard.net/quakeSource/index.php http://developer.valvesoftware.com/wiki/Source_Multiplayer_Networking


Parabéns por este quadro!
MrYoshiji

Sim, é assim que eu planejo ter meu jogo rodando, faz sentido apenas enviar a entrada!
Nikos
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.