Подтвердить что ты не робот

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

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

socket.connect();

socket.on('connect', function() {socket.send();
    console.log('Connected!');
    player = new Player(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 : function(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(){
        return 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;
    } else {
        keyCode = event.keyCode;
    }

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

    }

}

function update() {
    player.draw();
}

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

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

init();

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

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

server = http.createServer(function(req, res){
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end('<h1>Hello world</h1>');
});
server.listen(8080);

var socket = io.listen(server);

socket.on('connection', function(client){

    client.on('message', function(message){
        console.log(message);
        client.broadcast(message);
    })
    client.on('disconnect', function(){

    })

});

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

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

Может, у кого-нибудь есть идея? Я ищу в Google, но не нахожу ответа.

Извините за мой английский.

4b9b3361

Ответ 1

Сначала проверьте http://www.google.com/events/io/2011/sessions/super-browser-2-turbo-hd-remix-introduction-to-html5-game-development.html

объясняется, как использовать requestAnimationFrame между прочим.

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

Когда игрок щелкает вниз, клиент должен только отправить сообщение. Затем сервер должен отправить сообщение всем клиентам, включая клиента, который принял действие.

Каждый игрок должен существовать как объект на сервере. Когда игрок входит в систему, они должны обновляться о статусе каждого игрока, уже находящегося на сервере.

измененный код клиента: http://codr.cc/s/d0154536/js

измененный код сервера: http://codr.cc/s/f96ce1d2/js

Ответ 3

В случае, если кто-то столкнется с этим вопросом, как сейчас, я хотел добавить эту ссылку в качестве примера.

Я несколько месяцев назад шел по тому же пути, что и op, и прочитал каждую статью, которую я смог найти на авторитетной серверной модели (включая ту, что упоминается в ответе @Epeli), и как ее реализовать с помощью nodejs/socketio.

Результат моего исследования проявился в проекте github, расположенном по ссылке, приведенной выше (есть также живая демонстрация). Надеюсь, это поможет кому-то.

Ответ 4

Теперь есть многопользовательский многопользовательский javascript-сервер с открытым исходным кодом (и клиентская библиотека), называемый Lance.gg, который предоставляет, как вы говорите, реальный многопользовательский опыт

Он обрабатывает клиентское предсказание, шаговый дрейф, изгиб и основную физику.

Отказ от ответственности: я являюсь одним из участников