简单扑克游戏之草图

修改排序规则，按照大王，小王，2，A，K，Q，J，10，9，8，7，6，5，4，3 的顺序展示。

扑克游戏.gif

html

<div class="wrap"> 
    <div class="box-upper"></div> 
    <div class="box-center">
         <button class="discard" id="discard">出牌</button> 
         <button class="abandon" id="abandon">放弃</button> 
         <div class="preview" id="preview"></div> 
    </div> 
    <div class="box-below"></div> 
</div>

JS

$(init);

function init() {
    var list=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54];
    var pokerList = getArrayItems(list, 27);

    for(var index in pokerList) {
        getPos(pokerList[index]);
    }

    //选牌
    $("body").on("click", ".poker", function () {
        var that = $(this);
        if(that.hasClass("click-up")) {
            that.removeClass("click-up");
        } else {
            that.addClass("click-up");
        }
    });

    //出牌
    $("body").on("click", "#discard", function () {
        $(".click-up").each(function () {
            $(this).removeClass("click-up");
            $("#preview").append($(this).prop("outerHTML"));
            $(this).remove();
        });
    });

    //放弃
    $("body").on("click", "#abandon", function () {
        $(".click-up").each(function () {
            $(this).removeClass("click-up");
        });
    });

}
//从一个给定的数组arr中,随机返回num个不重复项
function getArrayItems(arr, num) {
    var temp = new Array();
    var result = new Array();

    for (var index in arr) {
        temp.push(arr[index]);
    }
    for (var i = 0; i < num; i++) {
        if (temp.length > 0) {
            var arrIndex = Math.floor(Math.random() * temp.length);
            result[i] = temp[arrIndex];
            temp.splice(arrIndex, 1);
        } else {
            break;
        }
    }
    return result.sort(sortNumber);
}
//根据余数排序
function sortNumber(a, b) {
    var x = changeNum(a % 13, a);
    var y = changeNum(b % 13, b);
    return y - x;
}
//改变特殊牌的值
function changeNum(n, m) {
    var temp = n;
    switch (m) {
        case 53:
            temp = 18;
            n = -1;
            break;
        case 54:
            temp = 17;
            n = -1;
            break;
        default:
            break;
    }
    switch (n) {
        case 0:
            temp = 14;
            break;
        case 1:
            temp = 15;
            break;
        case 2:
            temp = 16;
            break;
        default:
            break;
    }
    return temp;
}
//根据序号指定精灵图的位置
function getPos(index) {
    var left = (index % 13 == 0) ? 1080 : (index % 13 * 90 - 90);
    var top = (index % 13 == 0) ? (parseInt(index / 13) * 120 - 120) : (parseInt(index / 13) * 120);
    left *= -1;
    top *= -1;
    var html = "<div class='poker p" + index +"' id='p" + index + "' style='background-position: " + left + "px " + top + "px;'></div>";
    $(".box-below").append(html);
}