Node.js 如何在HTML5多人游戏中使用socket.io移动对象

我正在尝试使用Quintus HTML5游戏引擎和node.js和socket.io构建一个多人纸牌游戏，到目前为止，我已经创建了mainLevel场景，并将一些纸牌对象插入到该场景中，当玩家释放纸牌时，可以触摸并拖动纸牌，将其移动到屏幕中央，并使用socket.io制作该游戏的多人游戏要做到这一点，但我有点迷茫，没有任何关于如何使用socket.io构建游戏的文档或资源，但我现在使用socket所做的是当新客户进入游戏的索引页时，他会自动连接到名为lobble的房间，并且在玩（移动）牌时这个房间里的所有其他玩家都知道一张牌是移动的，但我真的不知道如何移动一个玩家在另一个玩家的场景中玩过的牌

所以我现在做的是：

server.js：

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

game.js：

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 > touch.origY - ((10/100)*Q.el.height)) { //define the line that the card should pass if the amount of draged > 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;
            }
  });

index.html

<!DOCTYPE html>

<html>

<head>
    <title>Card Game</title>
    <link rel="stylesheet" type="text/css" href="bootstrap-3.2.0-dist/css/bootstrap.min.css">
</head>

<body>  
    <canvas id='myGame' width= "640" height="603" class="img-responsive"></canvas>
    <script src="/JS/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script src="/JS/socket.io.js" type="text/javascript"></script>
    <script src="/JS/quintus-all.min.js" type="text/javascript"></script>

    <script src="/JS/Game.js" type="text/javascript"></script> 
</body>

</html>

纸牌游戏

因此，请提供有关如何使一名玩家在游戏中移动到其他玩家的卡的任何帮助

更新：：

---

新建

我成功地在游戏中所有连接的用户中移动了相同的对象，因此我所做的

第一：
我添加了对象数组

var cards=[]默认为空，以便以后将所有卡放入（推送）并更新移动的对象

第二：

我换衣服

socket.emit（'tellothers'，{cardName:this.p.name，x:this.p.x，y:this.p.y}）

到

socket.emit（'tellothers'，{cardName:this.p.name，cardAsset:this.p.asset，cardScale:this.p.scale，cardX:this.p.x，cardY:this.p.y}）

我传递移动的卡的所有参数，以便以后使用，以便让其他客户知道已移动的卡是什么

第三：

然后在插入卡后的mainLevel场景中，我将所有卡推送到
var cards=[]

cards.push({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) });
cards.push({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)});
cards.push({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)});
cards.push({name:'Card_4',asset:'Queen_OF_Hearts.png', scale:0.00 ,x: ((50/100)*Q.el.width), y: Q.el.height - ((80/100)*Q.el.height)});

第四：

我已经创建了新的
updateLevel
场景，以便以后使用所有客户端中已移动的卡更新所有客户端的场景，甚至是移动卡的客户端的场景

Q.scene("updateLevel", 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 }));

  for(sub in cards){
    stage.insert(new Q.Card({name:cards[sub].name, asset:cards[sub].asset, scale:cards[sub].scale, x:cards[sub].x, y:cards[sub].y}));
  }

});

第五：
我创建了一些函数，以便在场景更新的后期给他打电话

var UpdateCards = function(){
    Q.clearStages();
    Q.stageScene('updateLevel');
}

然后：
当
cardmove

  socket.on('cardmove',function(data){

     data.cardX = ((50/100)*Q.el.width);
     data.cardY = Q.el.height - ((50/100)*Q.el.height);

  cards = cards.filter(function(obj) {
    return obj.name !== data.cardName;
});

  cards.push({name:data.cardName, asset:data.cardAsset, scale:data.cardScale, x:data.cardX, y:data.cardY});

  UpdateCards();
});

在服务器端：
我改变

socket.on('tellothers', function(data) {
        socket.broadcast.to(socket.room).emit('cardmove', data);
    });

到

socket.on('tellothers', function(data) {
        io.sockets["in"](socket.room).emit('cardmove', data);
    }); 

我更新了问题，并把新的源代码和下载链接，如果你想尝试它：D