Multiplayer HTML5, Node.js, Socket.IO [geschlossen]


13

Ich versuche, einfache Multi-Player mit HTML5 Canvas, JavaScript (auch mit John Resigs einfacher Vererbungsbibliothek) und Node.js mit Socket.IO zu erstellen. Mein Kundencode:

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

var player = null;

var UP = 'UP',
    LINKS = 'LINKS',
    DOWN = 'DOWN',
    RECHTS = 'RECHTS';

socket.connect ();

socket.on ('connect', function () {socket.send ();
    console.log ('Verbunden!');
    Spieler = neuer Spieler (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: Funktion (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 () {
        gib dies zurück.
    },
    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 ++;
    }
});

Funktion checkKeyCode (Ereignis) {
    var keyCode;
    if (event == null) {
        keyCode = window.event.keyCode;
    } else {
        keyCode = event.keyCode;
    }

    switch (keyCode) {
        Fall 38: // UP
            player.moveUP ();
            socket.send (UP);
        brechen;
        Fall 37: // LINKS
            player.moveLEFT ();
            socket.send (LEFT);
        brechen;
        case 40: // DOWN
            player.moveDOWN ();
            socket.send (DOWN);
        brechen;
        Fall 39: // RECHT
            player.moveRIGHT ();
            socket.send (RECHTS);
        brechen;
        Standard:
        brechen;

    }

}

Funktionsupdate () {
    player.draw ();
}

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

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

drin();

Und Servercode:

var http = require ('http'),
    io = require ('socket.io'),
    buffer = new Array (),

server = http.createServer (function (req, res) {
    res.writeHead (200, {'Content-Type': 'text / html'});
    erneut senden('

Hallo Welt

'); }); server.listen (8080); var socket = io.listen (Server); socket.on ('Verbindung', Funktion (Client) { client.on ('message', function (message) { console.log (message); client.broadcast (Nachricht); }) client.on ('disconnect', function () { }) });

Und wenn ich zwei Clients betreibe, kann ich mit dem ersten Client das zweite Client-Rect und mit dem zweiten Client das erste Client-Rect und so etwas wie mit dem dritten Client das erste und zweite Client-Rect verschieben.

Ich habe Fragen, wie man einen echten Multiplayer erstellt. so etwas wie: Öffne drei Clients und der erste Client erhält rect1, der zweite rect2 und der letzte rect3. Der erste Client kann nur rect1 bewegen, der dritte Client kann nur rect3 bewegen.

Vielleicht hat jemand eine Idee? Ich suche in Google, finde aber keine Antwort.

Entschuldigung für meine englische Sprache, Danke.

Antworten:


15

Ich habe ein Framework speziell für die Erstellung von HTML5-Echtzeit-Multiplayer-Spielen erstellt, das auf dem Client / Server-Modell basiert. In diesem Modell senden die Spieler nur Eingaben an den Server (Tasten werden gedrückt) - und das Spiel findet auf dem Server statt.

Der Server sendet zeitgesteuerte Welt-Snapshots an alle Clients, und Clients rendern sich etwa 75 ms zurück, indem sie zwei bekannte Welt-Updates finden, zwischen denen ihre Rendertime liegt.

Repository (enthält 3 Demos)
https://github.com/onedayitwillmake/RealtimeMultiplayerNodeJs

Video Box2D Demo in Aktion:
http://vimeo.com/24149718

Folien von JSConf 2011:
http://www.slideshare.net/MarioGonzalez15/realtime-html5-multiplayergameswithnodejs-7868336

Es basiert auf den Whitepapers der Quakeworld und der Valve Source Engine:
http://fabiensanglard.net/quakeSource/index.php http://developer.valvesoftware.com/wiki/Source_Multiplayer_Networking


Herzlichen Glückwunsch zu diesem Framework!
MrYoshiji

Ja, so plane ich mein Spiel laufen zu lassen. Es ist sinnvoll, nur die Eingabe zu senden.
Nikos
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.