斗地主发牌器

HTML代码

    <div class="play1"></div>
    <div class="play2"></div>
    <div class="play3"></div>
    <p class="dipai"></p>

JS代码

//生成54张牌
function genPoker() {
    //基础数据
    let pokerNum = [3, 4, 5, 6, 7, 8, 9, 10, "J", "Q", "K", "A", 2];
    let pokerType = ["♦️", "♣️", "♥️", "♠️"];
    let pokerKing = ["小王", "大王"];
    let poker = [];
    //遍历数字与花色生成54张牌
    pokerNum.map((item1) => {
        pokerType.map((item2) => {
            poker.push(item1 + item2);
        })
    });
    poker.push(...pokerKing);
    return poker;
}

//生成乱序的1-54的数字（打乱54张牌）
function xipai() {
    let set = new Set();
    while (true) {
        set.add(getNum(0, 53));
        if (set.size == 54) {
            return [...set];
        }
    }
}

//给用户发牌（已排序）
function fapai(poker, pokerIndex) {
    let arr = [];
    //排序
    pokerIndex.sort((a, b) => a - b);
    pokerIndex.map(item => {
        arr.push(poker[item]);
    });
    return arr;
}

//主程序
function main() {
    let poker = genPoker();
    let pokerIndex = xipai();
    //获取玩家和底牌节点
    let divEles = document.querySelectorAll("div");
    let pEle = document.querySelector("p");
    //给节点添加内容
    [...divEles].map((item, index) => {
        item.innerHTML = `Play${index+1}:` + fapai(poker, pokerIndex.splice(0, 17)).join(",");
    });
    pEle.innerHTML = "底牌：" + fapai(poker, pokerIndex).join(",");
}

main();

页面效果图