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();
页面效果图