Próbuję utworzyć prosty Multi-player z HTML5 Canvas, JavaScript (także przy użyciu prostej biblioteki dziedziczenia Johna Resiga) i Node.js z Socket.IO. Kod mojego klienta:

var canvas = document.getElementById („gra”);
var context = canvas.getContext ('2d');
var socket = new io.Socket ('127.0.0.1', {port: 8080});

var player = null;

var UP = „UP”,
    LEWO = „LEWO”,
    DOWN = „DOWN”,
    PRAWO = „PRAWO”;

socket.connect ();

socket.on ('connect', function () {socket.send ();
    console.log („Połączono!”);
    player = nowy gracz (50, 50);
});

socket.on („wiadomość”, funkcja (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 („odłącz”, funkcja () {
    console.log („Disconnected!”);
});

var Player = Class.extend ({
    init: funkcja (x, y) {
        this.x = x;
        this.y = y;
    },
    setX: funkcja (x) {
        this.x = x;
    },
    getX: function () {
        zwróć to. x;
    },
    setY: funkcja (y) {
        this.y = y;
    },
    getY: function () {
        zwróć to. 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 ++;
    }
});

funkcja checkKeyCode (zdarzenie) {
    var keyCode;
    if (event == null) {
        keyCode = window.event.keyCode;
    } else {
        keyCode = event.keyCode;
    }

    switch (keyCode) {
        przypadek 38: // UP
            player.moveUP ();
            socket.send (UP);
        przerwa;
        przypadek 37: // LEWY
            player.moveLEFT ();
            socket.send (LEFT);
        przerwa;
        przypadek 40: // W DÓŁ
            player.moveDOWN ();
            socket.send (DOWN);
        przerwa;
        sprawa 39: // PRAWO
            player.moveRIGHT ();
            socket.send (PRAWY);
        przerwa;
        domyślna:
        przerwa;

    }

}

aktualizacja funkcji () {
    player.draw ();
}

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

funkcja init () {
    document.onkeydown = checkKeyCode;
}

w tym();

I kod serwera:

var http = wymagany („http”),
    io = wymagany („socket.io”),
    buffer = new Array (),

server = http.createServer (funkcja (req, res) {
    res.writeHead (200, {'Content-Type': 'text / html'});
    wysłać ponownie('
Witaj świecie
”);
});
server.listen (8080);

var socket = io.listen (serwer);

socket.on („połączenie”, funkcja (klient) {

    client.on („wiadomość”, funkcja (wiadomość) {
        console.log (komunikat);
        client.broadcast (wiadomość);
    })
    client.on („odłącz”, function () {

    })

});

A kiedy uruchamiam dwa klienty, ja z pierwszym klientem mogę przenieść drugiego klienta Rect, a drugim klientem przenieść pierwszego klienta rect, a coś takiego jak z trzecim klientem może przenieść pierwszy i drugi klient rect.

Mam pytanie, jak stworzyć prawdziwy Multi-Player? coś w stylu: Otwórz trzy klienty, a pierwszy klient dostanie rect1, drugi rect2 i ostatni rect3. Pierwszy klient może przenieść tylko rect3, trzeci klient może przenieść tylko rect3.

Może ktoś ma pomysł? Przeszukuję w Google, ale nie znajduję odpowiedzi.

Przepraszam za mój język angielski, dziękuję.

Stworzyłem środowisko specjalnie do tworzenia gier wieloosobowych w czasie rzeczywistym HTML5, w oparciu o model klient / serwer. W tym modelu gracze wysyłają tylko dane wejściowe na serwer (naciśnięcie klawiszy) - a gra odbywa się na serwerze.

Serwer wysyła czasowe migawki świata do wszystkich klientów, a klienci renderują się, mówiąc 75 ms wstecz w stosunku do bieżącego czasu, znajdując dwie znane aktualizacje świata między nimi.

Repozytorium (zawiera 3 wersje demo)
https://github.com/onedayitwillmake/RealtimeMultiplayerNodeJs

Demo Box2D wideo w akcji:
http://vimeo.com/24149718

Slajdy z JSConf 2011:
http://www.slideshare.net/MarioGonzalez15/realtime-html5-multiplayergameswithnodejs-7868336

Opiera się na oficjalnych dokumentach Quakeworld i Valve's Source:
http://fabiensanglard.net/quakeSource/index.php http://developer.valvesoftware.com/wiki/Source_Multiplayer_Networking