JS 实现 页面渲染出，三位玩家游戏扑克牌，还有3张底牌，每次刷新，玩家拿到的牌和底牌，都是随机的，并且每张牌都是按递增排序。（代码过程已注释）
2021/11/20 23:11:03
本文主要是介绍JS 实现 页面渲染出，三位玩家游戏扑克牌，还有3张底牌，每次刷新，玩家拿到的牌和底牌，都是随机的，并且每张牌都是按递增排序。（代码过程已注释），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
第一步，先得到两个数组，用来放置，牌号和花色。
const number = ['3', '4', '5', '6', '7', '8', '9', '10', "J", "Q", "K", "A", '2']; //牌号，数组 const flower = ["♠️", "♥️", "♣️", "♦️"];
第二步，通过组合牌号和花色，生成牌
//先生成牌
function generate() {
let arr = []; //用来存放牌的组合
let index = 1; //图片的序号是从1开始的
for (let n = 0; n < number.length; n++) { //循环遍历牌号
for (let f = flower.length - 1; f >= 0; f--) { //循环遍历牌花色
arr.push({ //数组中添加
number: n, // 牌号 0-12的数字下标
flower: f, // 花色 3-0 的下标
str: flower[f] + number[n],//拿着下标去牌号里面拿到对应的牌号，和拿到对应的花色，把他们拼接起来。
url: `./img2/pkp_${index++}.jpg` //传入对应的图片牌
});
}
}
arr.push({ //由于数组里面没得大王和小王,所以遍历完过后，我们再在存放牌组合的后面在手动添加一组大王和一组小王
number: 53,
flower: "null",
str: "小王",
url: `./img2/pkp_53.jpg`
}, {
number: 54,
flower: "null",
str: "大王",
url: `./img2/pkp_54.jpg`
});
//打乱
let s = new Set(); //创建一个集合，去重，往数组中添加，0-53 之间不重复的54个数字
while (s.size < 54) {
s.add(randomNum(0, 53));
}
let disorder = [...s]; // 把 集合转换成数组，获得乱序下标
arr = disorder.map(item => arr[item]); //遍历，拿着随机的下标，去牌数组里面，找到对应的牌，并把打乱了的牌，继续放到牌数组里面，得到54张，乱序的牌
//分发牌
let puker1 = arr.slice(0, 17); //玩家1 //每一位，玩家，获取数组，拿到自己对应的，牌数，没人17张牌
let puker2 = arr.slice(17, 34); //玩家1
let puker3 = arr.slice(34, 51); //玩家1
let hand = arr.slice(51); //底牌
return [puker1, puker2, puker3, hand]; //把分发的牌，每个变量返回出去
}
第三步，给牌排序
let [puker1, puker2, puker3, hand] = generate(); //声明一个数组变量，里面是四个变量,这个变量等于,调用，上面生成牌的函数，这样我们就可以得到三个玩家的牌，和底牌了
//排序
function sort(arr) { // 把牌数组传到函数里面,拿到所有牌，给所有牌排序
arr.sort((a, b) => {
if (a.number == b.number) { //如果牌号一样，就按花色排
return a.flower - b.flower;
} else { //反之就按牌号排
return a.number - b.number;
}
});
return arr; //并且把排完序的牌，继续返回到数组里面
}
//排序后的牌
puker1 = sort(puker1); //玩家一 //玩家拿到手里的牌，我们直接调用排序函数，按同样的规则排序
puker2 = sort(puker2); //玩家二
puker3 = sort(puker3); //玩家三
hand = sort(hand); //底牌
拿到牌，通过面向对象，写法，把每张牌渲染到页面
class puker { //声明一个类
constructor(url) {
this.url = url; //这个类身上主要有,一个形参 ，这个类的某个值，就等于，这个形参，具体的值，取决于，我实例化过后，所传入的值
this.node = null; //这个类身上还有一个值为空 （后面等于创建的li标签）
}
//这个类身上有一个方法
method(puk) { //形参得到,遍历实例化所传入的，父元素id
this.node = document.createElement("li") //创建一个li标签，并把创建的标签赋值给类里面的空值
this.node.innerHTML = `<img src="${this.url}">` //而li标签，的innerHTML 等于一个img图片，，图片的类容就等于，遍历传入的每个牌对应的图片
puk.appendChild(this.node); //然后把有内容的li标签放到传入的父元素里面
}
}
puker1.forEach(item => new puker(item.url).method(puk1)); //遍历玩家一的牌,拿到玩家一所有的牌，每执行一次牌，就实例化一个类，并且把每个，牌对应的图片，传给类里面的形参,
//并且可以调用这个类下面的方法，并把，玩家一要放入标签的父元素 id传给方法的形参。 玩家一的牌遍历渲染完，继续执行下面玩家二的牌，后面同理
puker2.forEach(item => new puker(item.url).method(puk2));
puker3.forEach(item => new puker(item.url).method(puk3));
hand.forEach(item => new puker(item.url).method(puk4));
合并代码效果
// // 扑克牌
const number = ['3', '4', '5', '6', '7', '8', '9', '10', "J", "Q", "K", "A", '2']; //牌号，数组
const flower = ["♠️", "♥️", "♣️", "♦️"]; // 黑桃 < 红心 < 梅花 < 方块 数组
//生成牌
function generate() {
let arr = []; //用来存放牌的组合
let index = 1; //图片的序号是从1开始的
for (let n = 0; n < number.length; n++) { //循环遍历牌号
for (let f = flower.length - 1; f >= 0; f--) { //循环遍历牌花色
arr.push({ //数组中添加
number: n, // 牌号 0-12的数字下标
flower: f, // 花色 3-0 的下标
str: flower[f] + number[n],//拿着下标去牌号里面拿到对应的牌号，和拿到对应的花色，把他们拼接起来。
url: `./img2/pkp_${index++}.jpg` //传入对应的图片牌
});
}
}
arr.push({ //由于数组里面没得大王和小王,所以遍历完过后，我们再在存放牌组合的后面在手动添加一组大王和一组小王
number: 53,
flower: "null",
str: "小王",
url: `./img2/pkp_53.jpg`
}, {
number: 54,
flower: "null",
str: "大王",
url: `./img2/pkp_54.jpg`
});
//打乱
let s = new Set(); //创建一个集合，去重，往数组中添加，0-53 之间不重复的54个数字
while (s.size < 54) {
s.add(randomNum(0, 53));
}
let disorder = [...s]; // 把 集合转换成数组，获得乱序下标
arr = disorder.map(item => arr[item]); //遍历，拿着随机的下标，去牌数组里面，找到对应的牌，并把打乱了的牌，继续放到牌数组里面，得到54张，乱序的牌
//分发牌
let puker1 = arr.slice(0, 17); //玩家1 //每一位，玩家，获取数组，拿到自己对应的，牌数，没人17张牌
let puker2 = arr.slice(17, 34); //玩家1
let puker3 = arr.slice(34, 51); //玩家1
let hand = arr.slice(51); //底牌
return [puker1, puker2, puker3, hand]; //把分发的牌，每个变量返回出去
}
let [puker1, puker2, puker3, hand] = generate(); //声明一个数组变量，里面是四个变量,这个变量等于,调用，上面生成牌的函数，这样我们就可以得到三个玩家的牌，和底牌了
//排序
function sort(arr) { // 把牌数组传到函数里面,拿到所有牌，给所有牌排序
arr.sort((a, b) => {
if (a.number == b.number) { //如果牌号一样，就按花色排
return a.flower - b.flower;
} else { //反之就按牌号排
return a.number - b.number;
}
});
return arr; //并且把排完序的牌，继续返回到数组里面
}
//排序后的牌
puker1 = sort(puker1); //玩家一 //玩家拿到手里的牌，我们直接调用排序函数，按同样的规则排序
puker2 = sort(puker2); //玩家二
puker3 = sort(puker3); //玩家三
hand = sort(hand); //底牌
class puker { //声明一个类
constructor(url) {
this.url = url; //这个类身上主要有,一个形参 ，这个类的某个值，就等于，这个形参，具体的值，取决于，我实例化过后，所传入的值
this.node = null; //这个类身上还有一个值为空 （后面等于创建的li标签）
}
//这个类身上有一个方法
method(puk) { //形参得到,遍历实例化所传入的，父元素id
this.node = document.createElement("li") //创建一个li标签，并把创建的标签赋值给类里面的空值
this.node.innerHTML = `<img src="${this.url}">` //而li标签，的innerHTML 等于一个img图片，，图片的类容就等于，遍历传入的每个牌对应的图片
puk.appendChild(this.node); //然后把有内容的li标签放到传入的父元素里面
}
}
puker1.forEach(item => new puker(item.url).method(puk1)); //遍历玩家一的牌,拿到玩家一所有的牌，每执行一次牌，就实例化一个类，并且把每个，牌对应的图片，传给类里面的形参,
//并且可以调用这个类下面的方法，并把，玩家一要放入标签的父元素 id传给方法的形参。 玩家一的牌遍历渲染完，继续执行下面玩家二的牌，后面同理
puker2.forEach(item => new puker(item.url).method(puk2));
puker3.forEach(item => new puker(item.url).method(puk3));
hand.forEach(item => new puker(item.url).method(puk4));
这篇关于JS 实现 页面渲染出，三位玩家游戏扑克牌，还有3张底牌，每次刷新，玩家拿到的牌和底牌，都是随机的，并且每张牌都是按递增排序。（代码过程已注释）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-15useCallback教程：React Hook入门与实践
- 2024-11-15React中使用useContext开发：初学者指南
- 2024-11-15拖拽排序js案例详解：新手入门教程
- 2024-11-15React中的自定义Hooks案例详解
- 2024-11-14受控组件项目实战：从零开始打造你的第一个React项目
- 2024-11-14React中useEffect开发入门教程
- 2024-11-14React中的useMemo教程：从入门到实践
- 2024-11-14useReducer开发入门教程：轻松掌握React中的useReducer
- 2024-11-14useRef开发入门教程：轻松掌握React中的useRef用法
- 2024-11-14useState开发：React中的状态管理入门教程
