Question

this is my client: http://pastebin.com/C9PHzTQg
this is my server: http://pastebin.com/j2dfL84d

Now is “multiplayer” rect’s, but how to do movement?

I am send to ‘b’ – “UP”, “LEFT”, “RIGHT”, “DOWN” and how to handle ant move player?

Sorry for my bad english language.

Answer 1

First, you need to learn prototypical inheritance! As it is, each Player will have it’s own copy of the draw method, so put draw on Player.prototype instead:

var Player = function(context, x, y) {
    this.context = context;
    this.x = x;
    this.y = y;
};

Player.prototype = {
    draw: function() {
        this.context.fillRect(this.x, this.y, 16, 16);
    }
};

Then, I suggest you add a move method to Player:

Player.prototype = {
    draw: function() {
        this.context.fillRect(this.x, this.y, 16, 16);
    },

    move: function(direction) {
        // direction is "UP", "DOWN", "LEFT" or "RIGHT"
        switch(direction) {
            case "UP":
                this.y += 16;
                break;
            // ...
        }
    }
};

Then, in your message handler, you just have to:

socket.on('b', function(data) {
    players[data.player].move(data.direction);
    draw();
});

In the server, you would emit('b', { player: playerId, direction: "UP" }, for example.

Update: Instead of draw inside socket.on('b', ... above, you could have something like:

setInterval(draw, 100);

To redraw every 100 ms. It depends on the type of game, I guess.