两人斗地主，首先是画牌，采用精灵图进行画牌，将整副牌按照value值的大小和位于几排的方式进行存储,如下：

var allpokers=[
  112,113,101,102,103,104,105,106,107,108,109,110,111,
  212,213,201,202,203,204,205,206,207,208,209,210,211,
  312,313,301,302,303,304,305,306,307,308,309,310,311,
  412,413,401,402,403,404,405,406,407,408,409,410,411,
  514,515
];

这样的话在取牌的面值的时候只需要对其取余即可。
画的时候需要求出其坐标：

   z=this.pokers[i]%100;
      y=(parseInt(this.pokers[i]/100)-1)*120;
      if(z==12||z==13){
        x=(z-12)*90;
      } else if(z==14){
        x=(z-13)*90;
      } else if(z==15){
        x=(z-15)*90;
      } else{
        x=(z+1)*90;
      }

poker.js修改对象

function Poker() {
    this.pokers=[];//用户的牌
    this.status=START;//设置用户的状态
    this.id=1;//用来判断谁先出牌,一开始都设置为1，后来谁先登陆将id改为0，id为0的时候先出牌
    this.oppPoker=[];//存储对方出的牌
}
Poker.prototype.num = 27;
//第一次画牌
Poker.prototype.drawPokers=function () {
  var x,y,z;
  this.sort(this.pokers);
  for(var i=0;i<this.num;i++) {
      z=this.pokers[i]%100;
      y=(parseInt(this.pokers[i]/100)-1)*120;
      if(z==12||z==13){
        x=(z-12)*90;
      } else if(z==14){
        x=(z-13)*90;
      } else if(z==15){
        x=(z-15)*90;
      } else{
        x=(z+1)*90;
      }
      $('#usrPoker').append('<div id="poker'+i+'L"></div>');
      $('#usrPoker #poker'+i+'L').css({
          left: i*22+'px',
          backgroundPosition: (0-x)+ 'px ' + (0-y) + 'px'
      });
  }
}
//每次出完牌之后，进行重新画牌
Poker.prototype.reDrawPoker=function (poker) {
  var x,y;
  $('#usrPoker').html("");
    this.sort(poker);
    for(var i=0;i<poker.length;i++){
      y=(parseInt(poker[i]/100)-1)*120;
      if(poker[i]%100==12||poker[i]%100==13){
        x=(poker[i]%100-12)*90;
      } else if(poker[i]%100==14){
        x=(poker[i]%100-13)*90;
      } else if(poker[i]%100==15){
        x=(poker[i]%100-15)*90;
      }
      else{
        x=(poker[i]%100+1)*90;
      }
      $('#usrPoker').append('<div id="poker'+i+'L"></div>');
      $('#usrPoker #poker'+i+'L').css({
        left: i*22+'px',
        backgroundPosition: (0-x)+ 'px ' + (0-y) + 'px'
      });
    }
    this.pokers = poker;
}
//对牌进行排序
Poker.prototype.sort = function (poker) {
    poker.sort(function (a,b) {
        a=a%100;
        b=b%100;
        return a-b;
    });
}

main.js 主要功能

先进行初始化

function  init() {
    initSocket();
    pokerArray=new Poker();
    $('body').on('click',clickMachine);
}

通过点击的事件来判断用户的状态，状态机：

function clickMachine(e){
    $("#alert").hide();
    switch(pokerArray.status){
        case START:
            doStart();
            break;
        case PLAY:
            //肯定要先选择，才能再出牌
            doPlayCard(e.target);
            break;
        case GAMEOVER:
            socket.emit("Game Over");
            break;
    }
}

js端socket事件：

function initSocket(){

    //初始化牌，并第一次打牌，id为0的先出牌
    socket.on('draw',function (obj) {
        $("#startBox").hide();
        initOther();
        pokerArray.status=PLAY;
        pokerArray.pokers=obj;
        doFirstPlay();
        pokerArray.drawPokers();
    });

    socket.on('wait',function (id) {
        $("#start").hide();
        $("#info").show();
        pokerArray.id=id;
        console.log(id);
        pokerArray.status=WAIT;
        console.log(pokerArray.id);
    });

    //发牌后的对方那边的显示
    socket.on("show card",function (other,pokers) {
        //获取对方出的牌的数组
        pokerArray.oppPoker=pokers;

       //显示在对方的桌面上
        $('#otherShow .showPoker').html("");
        for(var i=0;i<pokers.length;i++){
            y=(parseInt(pokers[i]/100)-1)*120;
            z=pokers[i]%100;
            if(z==12||z==13){
                x=(z-12)*90;
            } else if(z==14){
                x=(z-13)*90;
            } else if(z==15){
                x=(z-15)*90;
            } else{
                x=(z+1)*90;
            }
            $('#otherShow .showPoker').append('<div id="ospoker'+i+'"></div>');
            $('#otherShow .showPoker #ospoker'+i).css({
              left: i*32+'px',
              backgroundPosition: (0-x)+ 'px ' +(0-y) + 'px'
            });
        }
        oppPokerLength=oppPokerLength-pokers.length;
        initOther(oppPokerLength);
        socket.emit('doPlay',pokerArray.id);
    });
  //第一次之后开始打牌，判断该谁出牌，id为0的先出牌，id为1的后出牌
    socket.on('startPlay',function(id){
        pokerArray.status=PLAY;
        pokerArray.id=id;
        doFirstPlay();
    });
    socket.on('stop game',function () {
        $("#info").text("Game Over");
        $('#start').hide();
        $("#startBox").show();
    });
  //用户不出后，对方出牌的时候可以改变牌型
    socket.on('change type',function () {
        pokerArray.oppPoker.splice(0,pokerArray.oppPoker.length);
    });
}

服务器端进行发牌：

var users=[];
var online=[];
var sockets=[];
var allpokers=[
  112,113,101,102,103,104,105,106,107,108,109,110,111,
  212,213,201,202,203,204,205,206,207,208,209,210,211,
  312,313,301,302,303,304,305,306,307,308,309,310,311,
  412,413,401,402,403,404,405,406,407,408,409,410,411,
  514,515
];
io.on('connection', function(socket) {
    var uid;
    socket.on('login', function (usrName) {
        if (online.indexOf(usrName) != -1||online.length>=2) {
            console.log("existed");
        } else {
            uid=usrName;
            users[usrName] = socket.id;
            sockets[socket.id] = socket;
            online.push(usrName);
        }
    });

    socket.on('start game', function (usrId,obj) {
        var index;
        var pokerObj=obj;
        if(online.length==2){
            for(var i = 0; i < 27; i++) {
              index=parseInt(Math.random()*allpokers.length);
              pokerObj.pokers.push(allpokers[index]);
              allpokers.splice(index,1);
            }
          socket.broadcast.emit('draw',pokerObj.pokers);
          socket.emit('draw',allpokers);
        } else{
          //将先进来人的id设为0
          var id=0;
          socket.emit('wait',id);
        }
    });

    socket.on("play card",function(uid,pokers){
        var index=online.indexOf(uid);
        if(index!=-1){
          socket.broadcast.emit("show card",uid,pokers);
        }
    });
//用来设置下一个出牌的人，将当前出牌的id设为1，对方的设为0
    socket.on('doPlay',function (sid) {
          var id;
          if(sid==0){
            id=1;
          } else{
            id=0;
          }
          socket.broadcast.emit('startPlay',(1-id));
          socket.emit('startPlay',id);
    });
    socket.on('Game Over',function () {
          socket.broadcast.emit('stop game');
          socket.emit('stop game');
    })
//如果对方不出牌的话，那么用户就可以更换牌的类型
    socket.on('doRetype',function () {
          socket.broadcast.emit("change type");
    });
    socket.on('disconnect', function () {
          var index=online.indexOf(uid);
          if(index!=-1){
            online.splice(index,-1);
          }
    });
});

开始打牌：

function doStart() {
    socket.emit("start game",uid,pokerArray);
}

选择牌

function doSlide(event){
    var s=event.id.slice(5,-1);
    if($(event).attr('selected')){
        $(event).css({bottom: '10px'}).removeAttr('selected');
        var index = pokers.indexOf(pokerArray.pokers[parseInt(s)]);
        if (index > -1) {
            pokers.splice(index, 1);
        }
    } else {
        $(event).css({bottom:'30px'}).attr('selected',true);
        pokers.push(pokerArray.pokers[parseInt(s)]);
    }
}

出牌：

//出牌的时候
function doPlayCard(event) {
    var match;
    var value=event.id;
    var reg=/L/g;
    while(match = reg.exec(value)){
        value="NUM";
    }
    switch(value){
        case PLAY:
            $('#showBox .showPoker').html("");
            //到时候在这边先进行比较，如果大于的话就出牌，否则的话就弹出不出
            if(compare(pokers,pokerArray.oppPoker)||pokerArray.oppPoker.length==0){
                for(var i=0;i<pokers.length;i++){
                    y=(parseInt(pokers[i]/100)-1)*120;
                    z=pokers[i]%100;
                    if(z==12||z==13){
                        x=(z-12)*90;
                    } else if(z==14){
                        x=(z-13)*90;
                    } else if(z==15){
                        x=(z-15)*90;
                    }
                    else{
                        x=(z+1)*90;
                    }
                    $('#showBox .showPoker').append('<div id="spoker'+i+'"></div>');
                    $('#showBox .showPoker #spoker'+i).css({
                        left: i*32+'px',
                        backgroundPosition: (0-x)+ 'px ' +(0-y) + 'px'
                    });
                    var index = pokerArray.pokers.indexOf(pokers[i]);
                    if (index > -1) {
                        pokerArray.pokers.splice(index, 1);
                    }
                }
                if(pokerArray.pokers.length==0){
                    pokerArray.status=GAMEOVER;
                    pokerArray.reDrawPoker(pokerArray.pokers);
                } else{
                    pokerArray.reDrawPoker(pokerArray.pokers);
                    socket.emit("play card",uid,pokers);
                    pokers.splice(0,pokers.length);
                    $('#userBox #pokerBtn').remove();
                }
            } else{
                console.log(alertMessage);
                $("#alert").text(alertMessage);
                $("#alert").show();
            }
            break;
        case "NUM":
            doSlide(event);
            break;
        case PASS:
            pokerArray.status=PASS;
            $('#userBox #pokerBtn').remove();
            socket.emit('doPlay',pokerArray.id);
            socket.emit('doRetype');
            break;
        default:
            break;
    }
}