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张底牌,每次刷新,玩家拿到的牌和底牌,都是随机的,并且每张牌都是按递增排序。(代码过程已注释)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程