1
即時嘗試使用Quintus HTML5遊戲引擎和node.js和socket.io構建多人紙牌遊戲，直到現在我已創建mainLevel場景並將一些卡片對象插入這個場景和卡片可以通過摩絲觸摸並拖動，當玩家放開卡片時它會進入屏幕中心，並使這個遊戲多人遊戲使用socket.io來做到這一點，但我有點失落有沒有關於如何使用socket.io創建遊戲的任何文檔或資源，但是當新客戶端進入遊戲的索引頁面時，我現在用套接字做了什麼，他自動連接到稱爲大廳的房間，並且當卡片播放（移動）所有其他這個房間裏的玩家知道一張牌正在移動，但我實際上並不知道如何移動一個玩家在其他遊戲場景中玩過的牌。如何在html中使用socket.io移動對象5多人遊戲
所以我做了什麼至今是：
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>
，請任何關於如何製作卡片的幫助玩家在遊戲中的其他玩家中移動。
UPDATE：：