网页斗地主实现——(2)
上文概要
上文简要叙述了大图截取小图,游戏开始前的坐位判断,扑克牌的value值判断
游戏开始
上文中在后台的ioServer中的sitSeat方法对当前桌子坐下的人数进行了判断,如果人数等于3则向客户端发送gameStart消息和seats储存的每个座位上的用户信息.
gameStart
netConnection.js
socket.on("gameStart",function (seats) {
MODAL.startGame(seats);
})
【网页斗地主实现——(2)】myjs.js
var modalBox = {
startGame:function (seats) {
$(".bc").empty();
for(var i = 0;
i<3;
++i){
if(seats[i].id==X._id){
//如果index为i的座位对应的用户id和当前用户id相同,则将myIndex设置为i
MODAL.default.myIndex = i;
}
}
if(MODAL.default.myIndex==0){
MODAL.default.status = "DISCARD";
}else{
MODAL.default.status = "WAITNG"
}
//status表示游戏开始后的三个状态,出牌阶段,等待阶段,游戏结束后得状态
MODAL.default.leftIndex = ((MODAL.default.myIndex-1)<0)?2:MODAL.default.myIndex-1;
MODAL.default.rightIndex = ((MODAL.default.myIndex+1)>2)?0:MODAL.default.myIndex+1;
//leftIndex为处于左边的玩家,rightIndex 为处于右边的玩家
this.cardsSort(this.default.cards);
//按照花色,牌大小排序
this.drawothers(seats[MODAL.default.leftIndex],seats[MODAL.default.rightIndex]);
//将左右两位玩家的信息绘制上去
this.drawuser(seats[MODAL.default.myIndex]);
//绘制玩家
this.placeCards($(".cardsLine"),this.default.cards,true);
//放置扑克
this.initPlay();
//绑定扑克牌的点击事件
}
}
drawothers
drawothers:function (objLeft,objRight) {
var content = [
'',
'',
'',
'
文章图片
',
'',
'',
'',
'',
'',
'',
'',
'',
'
文章图片
',
'',
'',
''
].join("");
var $others = $(content);
$others.children(".leftPlayer").children(".otherPlayer").children().attr({
src:objLeft.imgUrl
});
$others.children(".rightPlayer").children(".otherPlayer").children().attr({
src:objRight.imgUrl
});
$(".bc").append($others);
}
drawuser
drawuser:function (obj) {
var content = [
'',
'',
'
文章图片
',
'',
'',
'',
'',
'',
'',
'',
'',
'出牌',
'清空',
'',
'',
].join("");
var $user = $(content);
$user.children(".avatar").children().attr({
src:obj.imgUrl
})
$(".bc").append($user);
},
绘制玩家和对手没什么可以解析的
placeCards
placeCards:function ($goal,cardArray,isDelay) {
//isDelay用于设置延迟发牌,true则0.3s发一张牌
var $cards = $("").addClass("cards");
var array = cardArray;
for(var i = 0;
i").addClass("card");
$card.css({
'background-position':(array[i]%13*-90)+"px "+(Math.floor(array[i]/13)*-120)+"px"
});
//background-position:0px -480px;
$card.attr({
index:array[i]
//给每张牌设置index
});
//console.log("x坐标:"+array[i]%13+"y坐标"+Math.floor(array[i]/13));
$cards.append($card);
},i*300);
}else{
var $card = $("").addClass("card");
$card.css({
'background-position':(array[i]%13*-90)+"px "+(Math.floor(array[i]/13)*-120)+"px"
});
//background-position:0px -480px;
$card.attr({
index:array[i]
});
//console.log("x坐标:"+array[i]%13+"y坐标"+Math.floor(array[i]/13));
$cards.append($card);
}
})(i);
}
$goal.empty();
$goal.append($cards);
},
重点分析initPlay
initPlay:function () {
var isDrag;
//表示玩家是否拖动在拖动选择扑克牌
var overCount = 0;
//记录玩家通过拖动使牌被选择的数量
var index = [0,0,0];
//记录玩家连续拖动的三张牌的序号
$("body").on("mousedown",".cardsLine .cards .card",function (e) {
//mousedown记录扑克牌被选择事件
e.preventDefault();
overCount = 1;
index[overCount-1] = $(this).index();
if(e.which==1){
isDrag = true;
//开始拖动
}
ptrThis.toggleCard($(this));
//被点击的扑克牌变换状态
})
$("body").on("click","#clearCards",function () {
ptrThis.clearCards();
//清空展示被发送的扑克牌的界面
})
$("body").mousedown(function (e) {
if(e.which==1){
isDrag = true;
}
//给body元素绑定mousedown事件,如果是左键则设置isDrag为true
console.log("down");
})
$("body").mouseup(function (e) {
if(e.which==1){
isDrag = false;
}
console.log("up");
})
$("body").on("mouseover",".cardsLine .cards .card",function () {
//关键部分,如果只用mouseover来实现扑克牌滑动选择,则会出现BUG
++overCount;
switch (overCount){
case 1:
case 2:
case 3:
index[overCount-1] = $(this).index();
break;
default:
index[0] = index[1];
index[1] = index[2];
index[2] = $(this).index();
break;
}
if(overCount>2){
var direction;
if((index[0]-index[1])*(index[1]-index[2])>0){
direction = true;
//true表同方向
}else{
direction = false;
}
if(!direction){
//发生变向则需要将产生变向的那张牌变换状态.
if(isDrag){
ptrThis.toggleCard($(".cardsLine .cards").children().eq(index[1]));
console.log("发生变向"+$(".cardsLine .cards").eq(index[1]).index());
}
}
}
if(isDrag){
ptrThis.toggleCard($(this));
}
//console.log($(this).index());
})
}
发送扑克牌事件
$("body").on("click","#sendCards",statusMachine);
//这里使用了状态机的思想
function statusMachine() {
//根据status在产生不同的效果
switch(MODAL.default.status){
case "DISCARD":
MODAL.preSend();
//发送扑克
break;
case "WAITNG":
MODAL.notYourTurn();
//发送不是你的回合的提示
break;
case "GAMEOVER":
MODAL.readyGame();
//准备开始游戏,其实已经不是一个性质的按钮了
default:
break;
}
}
preSend
preSend:function () {
var array= new Array();
$(".cardsLine .card").each(function () {
if($(this).hasClass("select")){
array.push($(this).attr("index"));
}
})
socketFun.sendCards(array);
//ptrThis.sendCards();
},
sendCards
sendCards:function (array) {
var sendOut;
if(($(".cardsLine .cards").children().length-array.length)==0){
//如果牌被发光,则sendOut设置为true
sendOut = true;
}else{
sendOut = false;
}
var obj = {
array:array,
posterIndex:MODAL.default.myIndex,
sendOut:sendOut
}
socket.emit("postCards",obj);
},
服务器端处理
socket.on("postCards",function (obj) {
console.log(obj);
if(obj.sendOut){
for(var i = 0;
i<3;
++i){
seats[i].isReady=false;
}
}
//一局游戏结束,所有玩家都设置为没有准备状态
for(var i = 0;
i<3;
++i){
users[seats[i].id].emit("postCards",obj);
}
//将obj转发到(回)客户端
})
客户端接收postCards信息
socket.on("postCards",function (obj) {
MODAL.justifyWhich(obj);
})
justifyWhich
justifyWhich:function (obj) {
var $goal;
switch(obj.posterIndex){//判断是谁发的牌
case MODAL.default.myIndex:
ptrThis.removeCards();
$goal = $(".showCardLine");
break;
case MODAL.default.leftIndex:
$goal = $(".leftPlayer").children(".otherCards");
break;
case MODAL.default.rightIndex:
$goal = $(".rightPlayer").children(".otherCards");
break;
default:
break;
}
ptrThis.placeCards($goal,obj.array,false);
MODAL.default.turn = (MODAL.default.turn+1)%3;
//将轮次+1
if(MODAL.default.turn==MODAL.default.myIndex){
MODAL.default.status = "DISCARD";
}else{
MODAL.default.status = "WAITNG"
}
//如果轮次和玩家的座位号相等,则设置status为DISCARD(发牌阶段),否则WAITING
if(obj.sendOut){
//如果发牌完毕,则调用end
if(obj.posterIndex==MODAL.default.myIndex){
ptrThis.end(true);
}else{
ptrThis.end(false);
}
}
}
end和gameover
end:function (isWin) {
MODAL.default.status = "GAMEOVER";
ptrThis.gameover(isWin);
},
gameover:function (isWin) {
$("#sendCards").text("准备");
//将发牌的按钮的text改为准备
if(isWin){
alert("You Win!");
}else{
alert("You Lose!");
}
$(".showCardLine").empty();
$(".cardsLine").empty();
$(".leftPlayer").children(".otherCards").empty();
$(".rightPlayer").children(".otherCards").empty();
}
推荐阅读
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树
- 使用协程爬取网页，计算网页数据大小
- 人脸识别|【人脸识别系列】| 实现自动化妆
- paddle|动手从头实现LSTM