如何在html 5多人游戏中使用socket.io移动对象

即时尝试build立一个多人纸牌游戏使用Quintus HTML5游戏引擎和node.js和socket.io到现在为止，我已经创buildmainLevel场景，并插入一些卡物体到这个场景和卡可以通过摩斯和拖动，当玩家让去它的卡到它的屏幕中心，使这个游戏多人游戏我使用socket.io做到这一点，但我litle有点丢失没有任何文档或资源如何与socket.iobuild立游戏，但如此当新客户端进入游戏的索引页时，我现在用套接字做了什么，他自动连接到称为大厅的房间，当卡玩（移动）在这个房间里的所有其他玩家知道卡是移动，但我真的不知道如何移动一个玩家在其他游戏场景中玩过的牌。

所以我现在做的是：

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.px = touch.origX + touch.dx; this.py = 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.px = touch.origX; this.py = touch.origY; } else { // put the card if it pass the line in the new postion this.px = ((50/100)*Q.el.width); this.py = 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.px , y: this.py}); } }, }); //___________________________________________________________________ //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> 

所以请帮助如何使一个玩家玩的牌在游戏中的其他玩家中移动。

更新 ：：

新的链接下载源代码

Answer 1

我已经成功地在游戏中的所有连接用户中移动相同的对象，所以我做了什么

第一：
我添加对象数组var cards = []; 默认为空，以便以后使用将所有卡放入（推）所述卡并更新移动的对象。

第二：
我改变了
socket.emit('tellothers',{cardName: this.p.name ,x: this.px , y: this.py});
至
socket.emit('tellothers',{cardName:this.p.name, cardAsset:this.p.asset, cardScale:this.p.scale, cardX:this.px, cardY:this.py});
我通过移动卡的所有参数供以后使用，让其他客户知道已经移动的卡是什么。

第三：
然后在卡插入后的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)}); 

第四：
我已经创build了新的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})); } }); 

第五：在场景更新后期，我创build了一些叫他的function

 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。