效果图

斗地主.gif

后端代码

//创建一个存放poker的数组，表示从红桃到梅花的A~K，大王，小王
var count=54;
var pokers =new Array(count);
for(var i=0;i<54;i++){
  pokers[i]=i;
}

$(document).ready(function(){
  $(init);
});

function init(){
   shuffle();
//扑克选择，利用一个class标记选择状态并做出动画
   $(".poker").click(function(){
      if($(this).hasClass("select")){
        $(this).removeClass("select");
        $(this).animate({top:"+=50px"});
      }
      else{
      $(this).addClass("select");
      $(this).animate({top:"-=50px"});
    }
   });
//发牌
   $(".confirm").click(function(){
      if($(".display").children() != null){
        $(".display .poker").remove();
      }
    for(var i=0;i<13;i++){
      var index=".poker"+i;
      if($(index).hasClass('select')){
      // console.log($(index));

        $(".display").append($(index));
      }
    }
})

//取消
  $(".cancel").click(function(){
    for(var i=0;i<13;i++){
      var index=".poker"+i;
      if($(index).hasClass('select')){
        $(index).removeClass('select');
        $(index).animate({top:"+=50px"});
      }
    }
})
 }
//洗牌算法实现产生一个0~53且互不相同的数组
//洗牌
function shuffle(){
  for (var i = 0; i < 54; i++) {
  var rd=parseInt(Math.random()*54);
  var b=pokers[i] ;
   pokers[i]= pokers[rd];
   pokers[rd]=b;
}
//排序
    var i=13;
    var tempExchangVal;
    while (i > 0) {
        for (var j = 0; j < i - 1; j++) {
          if(pokers[j]===52){
                tempExchangVal = pokers[j];
                pokers[j] = pokers[j + 1];
                pokers[j + 1] = tempExchangVal;
                console.log("dawang");
          }
          else if(pokers[j]===53&&pokers[j+1]!==52){
                tempExchangVal = pokers[j];
                pokers[j] = pokers[j + 1];
                pokers[j + 1] = tempExchangVal;
          }
           else if ((pokers[j]+11)%13> (pokers[j + 1]+11)%13) {
                tempExchangVal = pokers[j];
                pokers[j] = pokers[j + 1];
                pokers[j + 1] = tempExchangVal;
            }
        }
        i--;
    }


  for(var i=0;i<13;i++){
      var x=pokers[i]%13*(-90);
      var y=parseInt(pokers[i]/13)*(-120);
      var left=x+"px";
      var top=y+"px";
      var pokeri="poker"+i;
      var html = $("<button class='poker'></button>").addClass(pokeri);
       html.css({"background-position":left+" "+top})
      $(".pokers").append(html);
  }
}