Многопользовательский HTML5, Node.js, Socket.IO [закрыто]


13

Я пытался создать простой мультиплеер с HTML5 Canvas, JavaScript (тоже с помощью простой библиотеки John Resig Inheritance) и 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',
    ВНИЗ = 'ВНИЗ',
    RIGHT = 'RIGHT';

Socket.connect ();

socket.on ('connect', function () {socket.send ();
    console.log ( 'Connected!');
    игрок = новый игрок (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 ();
    } еще {

    }
});

socket.on ('отключить', 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 () {
        вернуть this.x;
    },
    setY: function (y) {
        this.y = y;
    },
    getY: function () {
        вернуть 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;
    } еще {
        keyCode = event.keyCode;
    }

    switch (keyCode) {
        дело 38: // UP
            player.moveUP ();
            socket.send (УП);
        перемена;
        дело 37: // ВЛЕВО
            player.moveLEFT ();
            socket.send (слева);
        перемена;
        дело 40: // ВНИЗ
            player.moveDOWN ();
            socket.send (ВНИЗ);
        перемена;
        дело 39: // ПРАВО
            player.moveRIGHT ();
            socket.send (справа);
        перемена;
        дефолт:
        перемена;

    }

}

функция update () {
    player.draw ();
}

var FPS = 30;
setInterval (function () {
    Обновить();
    player.draw ();
}, 1000 / FPS);

функция init () {
    document.onkeydown = checkKeyCode;
}

в этом();

И код сервера:

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

server = http.createServer (function (req, res) {
    res.writeHead (200, {'Content-Type': 'text / html'});
    Отправить('

Привет, мир

«); }); server.listen (8080); var socket = io.listen (сервер); socket.on ('соединение', функция (клиент) { client.on ('message', function (message) { console.log (сообщение); client.broadcast (сообщение); }) client.on ('отключить', функция () { }) });

И когда я запускаю два клиента, я с первым клиентом могу переместить второй клиент Rect, а со вторым клиентом переместить первый клиент прямоугольник, и что-то подобное с третьим клиентом может переместить первый и второй клиент прямоугольник.

У меня есть вопрос, как создать настоящий Multi-Player? что-то вроде: Откройте три клиента, и первый клиент получит rect1, второй rect2 и последний rect3. Первый клиент может перемещать только rect1, третий клиент может перемещать только rect3.

Может у кого есть идеи? Я ищу в Google, но не могу найти ответ.

Извините за мой английский язык, спасибо.

Ответы:


15

Я создал фреймворк специально для создания многопользовательских игр HTML5 в реальном времени на основе модели клиент / сервер. В этой модели игроки отправляют только данные на сервер (нажаты клавиши) - и игра происходит на сервере.

Сервер отправляет синхронизированные моментальные снимки мира всем клиентам, и клиенты отображают себя, скажем, на 75 мсек назад по времени от текущего времени, обнаруживая два известных обновления мира, между которыми попадает время рендеринга.

Репозиторий (содержит 3 демонстрации)
https://github.com/onedayitwillmake/RealtimeMultiplayerNodeJs

Видео Box2D демо в действии:
http://vimeo.com/24149718

Слайды с JSConf 2011:
http://www.slideshare.net/MarioGonzalez15/realtime-html5-multiplayergameswithnodejs-7868336

Он основан на технических документах Quakeworld и Valve's Source:
http://fabiensanglard.net/quakeSource/index.php http://developer.valvesoftware.com/wiki/Source_Multiplayer_Networking


Поздравляем с этим Framework!
MrYoshiji

да, вот как я планирую запустить мою игру, имеет смысл просто отправить вклад!
Никос
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.