原生 js 实现斗地主的洗牌逻辑

第一步，先得到两个数组，用来放置，牌号和花色。

 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));