title: How to move object using socket.io in html 5 Multiplayer game
body: <p>im trying to build a multiplayer card game using Quintus HTML5 game engine and node.js and socket.io till now i have create mainLevel scene and insert some card objects into this scene and the cards can be touch by mose and drag when the player let go the card it go to center of the screen and to make this game multiplayer game i use socket.io to do that but i'm litle bit lost there is no any documentation or resources on how to build game with socket.io but so what i did now with socket when new client go to the index page of the game he is connect automatically to room called Lobby and when card played (moved) all other player in this room know that a card is move but i cant actually figure out how to move the card that one player has played in the other playeres scene.</p>
  
  <p>so what i do till now is :</p>
  
  <p>server.js:</p>
  
  <pre><code>    var express = require('express'),
      app = express(),
      server = require('http').createServer(app),
      io = require('socket.io').listen(server);
  
  //_______________________________________________
  
  app.get('/',function(req,res) {
      res.sendfile(__dirname + '/index.html');
  });
  
  app.use(express.static(__dirname + '/static'));
  
  //_______________________________________________
  
  var port = process.env.PORT || 3000;
  
  server.listen(port);
  console.log('Listening on port ' + port + '...');
  //_______________________________________________
  
  io.on('connection', function (socket) {
  
      console.log('a user connected\n');//log test
  
  //on socket connection serever add user to lobby room   
   socket.on('adduser', function() {
          socket.room = 'Lobby';//set the socket.room to Lobby room when first connect by Defults
          socket.join('Lobby');//let the client sockt join the Lobby room by Defult when firts connect to server 
      });
  
  socket.on('tellothers', function(data) {
          socket.broadcast.to(socket.room).emit('cardmove', data);
      });
  });
  </code></pre>
  
  <p>game.js:</p>
  
  <pre><code>var Q = window.Q = Quintus().include("Sprites, Scenes, Input, Touch");
  Q.setup("myGame").touch(Q.SPRITE_ALL);
  
  var socket = io.connect('http://localhost:3000');
  
  socket.on('connect',function(){
    console.log('user connect');
  });
  
  socket.emit('adduser');
  
  socket.on('cardmove',function(data){
     console.log('Card Name : '+ data.cardName + ' x :' + data.x + ' y : ' + data.y);
  });
  
  //Define Card object
  Q.Sprite.extend("Card", {
  
      init: function (p) {
  
          this._super(p)
  
          this.on("drag");
          this.on("touchEnd");
  
      },
  
      drag: function (touch) {    
  
          this.p.dragging = true;
          this.p.x = touch.origX + touch.dx;
          this.p.y = touch.origY + touch.dy;
  
      },
  
      touchEnd: function (touch) {
  
          // put a line on the screen if the card pass it put the card in the new position if not put the card in the orginal(old) postion 
          if (touch.origY + touch.dy &gt; touch.origY - ((10/100)*Q.el.height)) { //define the line that the card should pass if the amount of draged &gt; the screen line in Q.el.height - 200
  
              // put the card in the same old postion if is not pass the line
              this.p.x = touch.origX;
              this.p.y = touch.origY;
  
          } else {
              // put the card if it pass the line in the new postion  
              this.p.x = ((50/100)*Q.el.width);
              this.p.y = Q.el.height - ((50/100)*Q.el.height);
              //end the drag and touch after one time the object has been draged 
  
              touch.obj.off('drag'); 
              touch.obj.off('touchEnd');
  
              socket.emit('tellothers',{cardName: this.p.name ,x: this.p.x , y: this.p.y});
          }
      },
  });
  
  //___________________________________________________________________
  
  //drwa objects in canvace
  Q.scene("mainLevel", function(stage){
      Q.gravity = 0;
      stage.insert(new Q.Sprite({ asset: "Card_Table.png", x:Q.el.width / 2, y: Q.el.height / 2, type: Q.SPRITE_NON }));
  
    stage.insert(new Q.Card({name:'Card_1',asset: "Queen_OF_Hearts.png", scale: 0.60, x: Q.el.width / 2, y: Q.el.height - ((15/100)*Q.el.height) }));
  
    stage.insert(new Q.Card({name:'Card_2',asset:'Queen_OF_Hearts.png', scale: 0.50, x: ((20/100)*Q.el.width), y: Q.el.height - ((50/100)*Q.el.height)}));
  
    stage.insert(new Q.Card({name:'Card_3',asset:'Queen_OF_Hearts.png', scale: 0.80, x: ((80/100)*Q.el.width), y: Q.el.height - ((50/100)*Q.el.height)}));
  
    stage.insert(new Q.Card({name:'Card_4',asset:'Queen_OF_Hearts.png', x: ((50/100)*Q.el.width), y: Q.el.height - ((80/100)*Q.el.height)}));
  
  });
  
   //___________________________________________________________________
  
  Q.debug = true;
  Q.debugFill = true;
  
  //load assets
  Q.load(["Card_Table.png","Queen_OF_Hearts.png"], function(){
      Q.stageScene("mainLevel");
  });
  
   //___________________________________________________________________
  
  var currentObj = null;
  
       Q.el.addEventListener('mousemove',function(e) {
          var x = e.offsetX || e.layerX,
              y = e.offsetY || e.layerY,
              stage = Q.stage();
  
          var stageX = Q.canvasToStageX(x, stage),
              stageY = Q.canvasToStageY(y, stage);
  
          var obj = stage.locate(stageX,stageY);
  
          if(currentObj) { currentObj.p.over = false; }
              if(obj) {
                currentObj = obj;
                obj.p.over = true;
              }
    });
  </code></pre>
  
  <p>index.html </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;title&gt;Card Game&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="bootstrap-3.2.0-dist/css/bootstrap.min.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;  
      &lt;canvas id='myGame' width= "640" height="603" class="img-responsive"&gt;&lt;/canvas&gt;
      &lt;script src="/JS/jquery-2.1.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="/JS/socket.io.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="/JS/quintus-all.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;script src="/JS/Game.js" type="text/javascript"&gt;&lt;/script&gt; 
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>so please any help on how to make the card that one player play move to in the other players in the game.  </p>
  
  <p><strong>UPDATE:</strong>:</p>
  
  <p>new <a href="https://www.dropbox.com/s/tlsfysd38m7mkqh/CardGameV6.zip?dl=0" rel="nofollow">link to download source code</a></p>