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.