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

13

Saya mencoba membuat Multi-player sederhana dengan HTML5 Canvas, JavaScript (juga menggunakan John Resig library Inheritance sederhana) dan Node.js dengan Socket.IO. Kode klien saya:

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

pemain var = nol;

var UP = 'UP',
    KIRI = 'KIRI',
    BAWAH = 'BAWAH',
    KANAN = 'KANAN';

socket.connect ();

socket.on ('connect', function () {socket.send ();
    console.log ('Terhubung!');
    pemain = Pemain baru (50, 50);
});

socket.on ('message', function (msg) {
    if (msg == 'UP') {
        player.moveUP ();
    } lain jika (Pesan == 'KIRI') {
        player.moveLEFT ();
    } lain jika (Pesan == 'BAWAH') {
        player.moveDOWN ();
    } lain jika (Pesan == 'KANAN') {
        player.moveRIGHT ();
    } lain {

    }
});

socket.on ('putuskan', fungsi () {
    console.log ('Terputus!');
});

var Player = Class.extend ({
    init: function (x, y) {
        this.x = x;
        this.y = y;
    },
    setX: function (x) {
        this.x = x;
    },
    getX: function () {
        kembalikan this.x;
    },
    setY: function (y) {
        this.y = y;
    },
    getY: function () {
        kembalikan ini.
    },
    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 () {
        ini.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;
    } lain {
        keyCode = event.keyCode;
    }

    switch (keyCode) {
        case 38: // UP
            player.moveUP ();
            socket.send (UP);
        istirahat;
        kasus 37: // KIRI
            player.moveLEFT ();
            socket.send (LEFT);
        istirahat;
        case 40: // BAWAH
            player.moveDOWN ();
            socket.send (DOWN);
        istirahat;
        kasus 39: // KANAN
            player.moveRIGHT ();
            socket.send (RIGHT);
        istirahat;
        default:
        istirahat;

    }

}

pembaruan fungsi () {
    player.draw ();
}

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

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

init ();

Dan kode server:

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

server = http.createServer (fungsi (req, res) {
    res.writeHead (200, {'Type-Type': 'text / html'});
    kirim ulang ('

Halo Dunia

'); }); server.listen (8080); var socket = io.listen (server); socket.on ('koneksi', fungsi (klien) { client.on ('message', function (message) { console.log (pesan); client.broadcast (pesan); }) client.on ('putuskan', fungsi () { }) });

Dan ketika saya menjalankan dua klien, saya dengan klien pertama dapat memindahkan klien kedua Rect dan dengan klien kedua memindahkan klien klien pertama dan sesuatu seperti dengan klien ketiga dapat memindahkan klien klien pertama dan kedua.

Saya punya pertanyaan bagaimana cara membuat Multi-Player nyata? sesuatu seperti: Buka tiga klien dan klien pertama mendapatkan rect1, rect2 kedua dan rect3 terakhir. Klien pertama hanya bisa bergerak rect1, klien ketiga hanya bisa bergerak rect3.

Mungkin ada yang punya ide? Saya mencari di Google tetapi tidak menemukan jawaban.

Maaf untuk bahasa inggris saya, terima kasih.

rhavd
sumber

Jawaban:

15

Saya telah membuat kerangka kerja khusus untuk membuat game multiplayer waktu-nyata HTML5, berdasarkan pada model Klien / Server. Dalam model ini, pemain hanya mengirim input ke server (tombol ditekan) - dan permainan terjadi di server.

Server mengirimkan snapshot dunia berjangka waktu ke semua klien, dan klien membuat diri mereka sendiri mengatakan 75 ms kembali dari waktu saat ini, dengan menemukan dua pembaruan dunia yang dikenal saat rendertime mereka berada di antaranya.

Repositori (berisi 3 demo)
https://github.com/onedayitwillmake/RealtimeMultiplayerNodeJs

Demo Video Box2D sedang beraksi:
http://vimeo.com/24149718

Slide dari JSConf 2011:
http://www.slideshare.net/MarioGonzalez15/realtime-html5-multiplayergameswithnodejs-7868336

Ini didasarkan pada whitepaper mesin Sumber Quakeworld dan Valve:
http://fabiensanglard.net/quakeSource/index.php http://developer.valvesoftware.com/wiki/Source_Multiplayer_Networking

suatu hari nanti akan membuat
sumber
Selamat atas Kerangka Kerja ini!
MrYoshiji
ya itulah bagaimana saya berencana untuk menjalankan permainan saya, masuk akal untuk hanya mengirim input!
Nikos