简单扑克游戏总结

目录：

1. 体系结构

体系结构图

2. 服务器-客户端通讯图

用户间通讯逻辑

客户端处理

用户点击登录按钮进入排队，并发给服务器随机 id，并进入登录状态

function doInit() {
    socket.emit("add user", id);
}

初始化socket

function socketInit() {

    // //当前只有一人登录，等待其他人加入，等待状态
    socket.on("waiting", function () {
        pkObj.data.status = WAIT;
    });

    //进入打牌界面
    socket.on("start poker", function (data) {
        if(拿到黑桃♠3) {  //转换成出牌状态
            pkObj.data.status = DISCARD;
        } else {  //等待
            pkObj.data.status = WAIT;
        }
    });

    //第三人登录显示拥挤
    socket.on("crowded", function () {
        alert("棋牌室拥挤，请稍后再试。。。");
    });

    //对方退出全部初始化，转换成重新开始状态
    socket.on("exit", function () {
        pkObj.data.status = RESTART;
    });

    //接受对方的牌，转换成出牌状态
    socket.on("receive discard", function (data) { });

    //对方放弃出牌，转换成出牌状态
    socket.on("receive abandon", function () {
        pkObj.data.status = DISCARD;
    });

    //比赛结果，装换成游戏结束状态
    socket.on("receive result", function (data) {
        pkObj.data.status = GAMEOVER;
    });
}

//游戏结束，刷新页面
function doRestart() {
    location.reload();
}

//登录状态，向服务器发送id
function doInit() {
    socket.emit("add user", id);
}

//出牌状态
function doDiscard(that) {}

//初始化扑克牌
function poker(list, n) {}

//展示对方的牌
function oppositePoker(n) {}

//根据余数排序
function sortNumber(a, b) {}

//改变特殊牌的值
function changeNum(n, m) {}

//根据序号指定精灵图的位置
function getPos(index) {}

//检查和确定出牌的类型
function checkPokerType(pokerList) {}

//将选择出的牌和对方出的牌进行比较
function compare(list1, list2) {}

//返回每张牌的面值
function getPokerFace(n) {}

服务器端处理

//从一个给定的数组arr中,随机返回num个不重复项
function getArrItems(arr, num) {}

//数组相减获得剩下的牌数组
function getArrSubtract(arr, sub) {}

//返回两组互不相同的27张牌数组
function getPoker() {}

//poker
var io = require('socket.io').listen(server);
var userCount = 0;
var user = {};
var first;  //第一位用户id
var second;  //第二位用户id

io.on('connection',function(socket) {

    //用户登录
    socket.on('add user', function(id) {
        if (userCount == 1) {
            //只有一人发送等待
        } else if (userCount == 2) {
             //两个人就发送开始打牌命令
            var data1 = { };    //包含每个人的牌组和是否还有黑桃三
            var data2 = { };
            //向每个人发送牌组
        } else if (userCount > 2) {
            //第三者不可以登录
        }
    });

    //用户退出
    socket.on('disconnect', function() {
        //其中一方退出则全部回到起始页面
    });

    //用户出牌
    socket.on('discard', function(data) {
          //向另外一个人发送牌组信息
    });

    //用户放弃
    socket.on("abandon", function(data) {
          //轮到另外一个人出牌
    });

    //用户投降
    socket.on("surrender", function(data) {
          //发送游戏结果
    });
});

3. 客户端状态转换

通讯状态转换图

说明：

1.用户进入登录界面，点击登录按钮，若当前已有一个人在等待，则直接进入游戏，否则一直等待，直到第二个人登录；
2.用户在游戏中随时可退出，刷新页面即视为退出，此时双方都回到登录界面，需要重新登录；
3.依据哪方拿到黑桃♠3，哪方就先出牌；
4.假设A先出牌，A出牌给B，B页面区域1显示A发过来的牌，换B出牌，出现有出牌、放弃和认输三个选项。点击出牌同样发送选中牌的数据，放弃则是不刷新桌上牌列，将出牌权给A。若A认输则直接结束游戏，B获胜，重新开始。

页面布局

出牌界面框架

2.1 PokerObj 对象定义

//pkObj
var pkObj = {
    data: {
        type: ERROR,    //出牌类型
        discardList: 0, //出牌数组
        remain: 27,    //我方牌的剩余量
        from: 0,    //我方id
        to: 0,  //对方id
        before: false,  //先出牌或对方放弃
        status: INIT    //状态：INIT初始化， DISCARD出牌，GAMEOVER游戏结束
    },
    init: function () {
        //初始化socket
        socketInit();
        //加载登录界面
        $(wrapper).append(htmlLogin);
    }
};

2.2 定义各种状态

var INIT = "INIT";  //开始
var WAIT = "WAIT";  //等待2
var DISCARD = "DISCARD" ;  //出牌
var GAMEOVER = "GAMEOVER";  //结束
var RESTART = "RESTART"; // 重新开始

2.3 根据状态绑定各种点击事件

function init() {
    //绑定点击事件
    $("body").on("click", clickEvent);
    //初始化socket和登录界面
    pkObj.init();
}
//点击事件
function clickEvent(e) {
    var target = e.target;
    var that = $(target);

    switch (pkObj.data.status) {
        case INIT:  //未登录状态
            doInit();
            break;
        case DISCARD:   //出牌状态
            doDiscard(that);
            break;
        case GAMEOVER:  //游戏结束状态
            doRestart();
            break;
        default:
            break;
    }
}

2.5 出牌状态点击 "#box-below" 的牌，选中后上移显示

if (that.parent().attr("id") == "box-below") {
    if (that.hasClass("click-up")) {
        that.removeClass("click-up");
    } else {
        that.addClass("click-up");
    }
}

2.6 点击出牌按钮将选中的牌显示在 “#preview-below” 里

利用.prop("outerHTML")获取选中的牌的整个div代码

$(".click-up").each(function() {
    list[i] = $(this).prop("outerHTML");  //获取选中的牌的整个div代码
    $(this).removeClass("click-up");
    $("#preview-below").append(list[i]);
    $(this).remove();
    i++;
});

2.7 将出牌的数组，对方id，己方id，出牌后剩余量放在data对象里一起发给服务器，并将状态设置为WAIT

pkObj.data.remain -= list.length;
var data = {
    discard: list,
    from: pkObj.data.from,
    to: pkObj.data.to,
    num: list.length,
    remain: pkObj.data.remain
};
pkObj.data.before = false;
$("#abandon").removeAttr("disabled");
socket.emit("discard", data);
$(".button-turn").addClass("hide-block");
pkObj.data.status = WAIT;

2.8 接收对方的牌，利用`append()` 放入 “#preview-above” 里

//接受对方的牌
socket.on("receive discard", function(data) {
    var num = data.num;
    var length = $(".opposite").length;
    $("#preview-above").html("");
    $("#preview-below").html("");
    for (var index in data.discard) {
        $("#preview-above").append(data.discard[index]);
    }
    $(".button-turn").removeClass("hide-block");
    // $(".opposite:eq(" + i + ")").remove();
    $(".box-upper").html("");
    oppositePoker(length - num);
    pkObj.data.status = DISCARD;
});

3. 判断牌组类型

简单扑克游戏规则.gif

关牌规则

1.牌数

一副牌，保留了所以牌，共54张；

2.发牌

由系统随机分发2家的牌，每家27张，不重复

3.出牌

第一次为黑桃3先出
牌的大小顺序：大王，小王，2，A，K，Q，J，10，9，8，7，6，5，4，3。
牌形分为：单张、一对、三张、姐妹对（两张三张都可以连接，且连接数量无限）、顺子（数量无限制）、炸弹（不能4带1）：
除了炸弹以外，普通牌形不允许对压，相同牌形只有比它大的才能出。
炸弹任何牌形都能出，炸弹的大小为：天王炸，2，A，K，Q，J，10，9，8，7，6，5，4，3。

思路

1. 客户端向服务器发送的是出牌的扑克块状代码数组

//利用$(selector).each 将每一个选中（上移）的扑克牌的html放进数组
var i = 0;
$(".click-up").each(function() {
    list[i] = $(this).prop("outerHTML"); //获取选中的牌的整个html代码
    $(this).removeClass("click-up");
    $("#preview-below").append(list[i]);
    $(this).remove();
    i++;
});

2. 利用`socket.io`发送到对方客户端，如下获取

//利用append动态添加到指定id为“preview-above”的div里
for (var index in data.discard) {
    $("#preview-above").append(data.discard[index]);
}

把id为preview-above元素里的扑克.poker利用attr("id")取出id值并进行正则操作获取值

$("#preview-above").find(".poker").each(function() {
    var pokerId = $(this).attr("id"); //atte取出id值
    pokerId = pokerId.replace(/[p]([0-9]+)/g, "$1"); //获取选中的牌的编号(删掉id值首字母p)
    aboveList[j] = getPokerFace(pokerId);
    j++;
});

3. 判断牌的类型

3.1 由于扑克牌的序号是从1到54，但这并不是扑克牌的面值。转换操作：

//返回每张牌的面值
function getPokerFace(n) {
    var temp = n % 13;
    var result;
    if(n == 53) {   //大王
        result = 17;
    } else if(n == 54) {  //小王
        result = 16;
    }
    if(temp >= 3 && temp <= 12) {  //3到Q
        result = temp;
    } else if(temp == 0) {  //老K
        result = 13;
    } else if(temp == 1) {  //A
        result = 14;
    } else if(temp == 2) {  //2
        result = 15;
    }
    return result;
}

3.2 获取到扑克牌面值，进行确定扑克牌数组的类型操作

//出牌类型：单，对，连对，炸
var ONE = "ONE";
var TWO = "TWO";
var TWO_2 = "TWO_2";
var THREE = "THREE";
var THREE_2 = "THREE_2";
var THREE_3 = "THREE_3";
var FOUR = "FOUR";
var STRAIGHT = "STRAIGHT";
var ERROR = "ERROR";
var KING = "KING";

简陋的状态转化

//牌型状态机
function typeState(type, n, m) {
    switch (type) {
        //单
        case ONE:
            if(n == m) {
                type = TWO;
            } else if(n == m +1 && m == 16) {
                type = KING;
            } else if(n == m + 1){
                type = STRAIGHT;
            } else {
                type = ERROR;
            }
            break;
        //对
        case TWO:
            if(n == m) {
                type = THREE;
            } else if(n == m + 1){
                type = TWO_2;
            } else {
                type = ERROR;
            }
            break;
        case TWO_2:
            if(n == m) {
                type = TWO;
            } else {
                type = ERROR;
            }
            break;
        case THREE:
            if(n == m) {
                type = FOUR;
            } else if(n == m + 1){
                type = THREE_2;
            } else {
                type = ERROR;
            }
            break;
        case THREE_2:
            if(n == m) {
                type = THREE_3;
            } else {
                type = ERROR;
            }
            break;
        case THREE_3:
            if(n == m) {
                type = THREE;
            } else {
                type = ERROR;
            }
            break;
        case STRAIGHT:
            if(n == m + 1) {
                type = STRAIGHT;
            } else {
                type = ERROR;
            }
            break;
        default:
            break
    }
    return type;
}

//返回牌的类型和排列中最小牌的面值
function getPokerType(pokerList) {
    var type = ONE;
    var n, m;
    for(var i = 1; i < pokerList.length; i++) {
        n = pokerList[i-1];
        m = pokerList[i];
        type = typeState(type, n, m);
    }
    if(type == TWO_2 || type == THREE_2 || type == THREE_3 || (type == STRAIGHT && pokerList.length < 5)) {
        type = ERROR;
    }
    var result = {
        type: type,
        val: m,
        length: pokerList.length
    };
    return result;
}

3.3 获取我自己选中的牌

$("#box-below").find(".click-up").each(function() {
    var pokerId = $(this).attr("id");
    pokerId = pokerId.replace(/[p]([0-9]+)/g, "$1"); //获取选中的牌的id(删掉首字母p)
    belowList[k] = getPokerFace(pokerId);
    k++;
});

将两个扑克牌数组的类型进行比较并确定大小

//pkObj.data.before为true表示谁拿到♠3 或者 对方放弃我可以出任意牌，同时我出的牌必须符合规则，即type != ERROR
var myPoker = getPokerType(belowList);

//compare(aboveList, belowList)用于比较相同类型的牌的大小
if(compare(aboveList, belowList) || (pkObj.data.before && myPoker.type != ERROR))

//将选择出的牌和对方出的牌进行比较
function compare(list1, list2) {
    var check = false;
    var data1 = getPokerType(list1); //对方的牌类型
    var data2 = getPokerType(list2);  //我的牌类型

    //1.类型相同的情况下再比较数组第一个元素大小;
    //2.4表示炸，对方不是炸，我出炸则check为true
    //3.天王炸
    if((data1.type == data2.type && (data1.length == data2.length) && list2[0] > list1[0]) || (data1.type != FOUR && data2.type == FOUR) || (data2.type == KING)) {
        check = true;
    }
    //check为true可出牌，否则不能出牌
    return check;
}

完

最后编辑于：2017.12.04 12:42:18

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,547评论 6赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,399评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,428评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,599评论 1赞 274
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,612评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,577评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,941评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,603评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,852评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,605评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,693评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,375评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,955评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,936评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,172评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 43,970评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,414评论 2赞 342