网页斗地主实现——(2)

上文概要

上文简要叙述了大图截取小图,游戏开始前的坐位判断,扑克牌的value值判断

游戏开始

上文中在后台的ioServer中的sitSeat方法对当前桌子坐下的人数进行了判断,如果人数等于3则向客户端发送gameStart消息和seats储存的每个座位上的用户信息.

gameStart

netConnection.js

    socket.on("gameStart",function (seats) {
        MODAL.startGame(seats);
    })

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 = [
            '    <div class="others">',
            '        <div class="player leftPlayer">',
            '            <div class="otherPlayer">',
            '                <img src="/images/leftIcon.jpg">',
            '            </div>',
            '            <div class="otherCards">',
            '            </div>',
            '       </div>',
            '       <div class="player rightPlayer">',
            '            <div class="otherCards">',
            '            </div>',
            '            <div class="otherPlayer">',
            '                <img src="/images/rightIcon.jpg">',
            '            </div>',
            '        </div>',
            '    </div>'
            ].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 = [
            '    <div class="user">',
            '        <div class="avatar">',
            '            <img src="/images/doge.jpg">',
            '        </div>',
            '        <div class="twoCards">',
            '           <div class="showCardLine">',
            '            </div>',
            '            <div class="cardsLine">',
            '            </div>',
            '        </div>',
            '        <div class="sendCards">',
            '           <button  id="sendCards" class="button button-glow button-rounded button-primary">出牌</button>',
            '           <button  id="clearCards" class="button button-glow button-rounded button-primary">清空</button>',
            '        </div>',
            '    </div>',
            ].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 = $("<div>").addClass("cards");
            var array = cardArray;
            for(var i = 0;i<array.length;++i){
                (function(i){
                    if(isDelay){
                        setTimeout(function(){
                            var $card = $("<div>").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 = $("<div>").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();
        }