【发布时间】：2014-11-27 08:15:03
【问题描述】：
我正在尝试使用 Quintus HTML5 游戏引擎和 node.js 和 socket.io 构建一个多人纸牌游戏，直到现在我已经创建了 mainLevel 场景并将一些卡片对象插入到这个场景中，并且可以通过鼠标触摸卡片并拖动玩家放开卡到屏幕中心并制作这个多人游戏，我使用 socket.io 来做到这一点，但我有点迷失，没有任何关于如何使用 socket 构建游戏的文档或资源。 io，但是当新客户端进入游戏的索引页面时，我现在使用套接字做了什么，他会自动连接到名为 Lobby 的房间，并且当打出（移动）卡片时，这个房间中的所有其他玩家都知道卡片正在移动，但我不能实际弄清楚如何移动一个玩家在其他玩家场景中打出的牌。
所以我现在做的是：
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>
所以请大家帮忙看看如何让一个玩家玩的牌移到游戏中的其他玩家身上。
更新：：
【问题讨论】：