13
\$\begingroup\$

I trying create simple Multi-player with HTML5 Canvas, JavaScript(too using John Resig simple Inheritance library) and Node.js with Socket.IO. My client code:

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();

And server code:

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('

Hello world

'); }); 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(){ }) });

And when I run two client's I with first client can move second client Rect and with second client move first client rect and something like with third client can move first and second client rect's.

I have question how to create real Multi-Player? something like: Open three client's and first client get rect1, second rect2 and last rect3. First client only can move rect1, client third can move only rect3.

Maybe anyone have idea? I search in Google but don't find answer.

Sorry for my English language, Thanks.

\$\endgroup\$
15
\$\begingroup\$

I have created a framework specifically for creating HTML5 realtime multiplayer games, based on the Client/Server model. In this model, players send only input to the server (keys being pressed) - and the game occurs on the server.

The server sends timed world-snapshots to all clients, and clients render themselves say 75 ms back in time from the current time, by finding two known world updates their rendertime falls between.

Repository (contains 3 demos)
https://github.com/onedayitwillmake/RealtimeMultiplayerNodeJs

Video Box2D demo in action:
http://vimeo.com/24149718

Slides from JSConf 2011:
http://www.slideshare.net/MarioGonzalez15/realtime-html5-multiplayergameswithnodejs-7868336

It's based on Quakeworld and Valve's Source engine whitepapers:
http://fabiensanglard.net/quakeSource/index.php http://developer.valvesoftware.com/wiki/Source_Multiplayer_Networking

\$\endgroup\$
  • \$\begingroup\$ Congratulations for this Framework! \$\endgroup\$ – MrYoshiji Mar 20 '13 at 20:58
  • \$\begingroup\$ yeah thats how I plan to have my game run, makes sense to just send the input! \$\endgroup\$ – Nikos May 8 '14 at 15:22

Not the answer you're looking for? Browse other questions tagged or ask your own question.