用JQuery写一个斗地主发牌器

最新推荐文章于 2020-07-07 16:24:48 发布

yuaiqiuhongyan

最新推荐文章于 2020-07-07 16:24:48 发布

阅读量439

点赞数

分类专栏： Y 文章标签：斗地主发牌器

本文链接：https://blog.csdn.net/qq_43028185/article/details/89618114

版权

Y 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

代码展示

CSS样式

       <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* body {
            background-color: aquamarine;
        } */

        div {
            width: 1280px;
            height: 150px;
            position: relative;
            display: flex;
            /* border: 1px dashed rgb(187, 176, 176); */
            margin: 0 auto;
            margin-top: 4px;
            margin-left: 42px;
        }

        #brand {
            width: 261px;
            /* border: 1px dashed rgb(187, 176, 176); */
            /* margin-left: 42px; */
            display: flex;
        }

        section {
            width: 128px;
            height: 150px;
            border: 1px solid rgb(187, 176, 176);
            position: relative;
            /* border-radius: 6px; */
        }

        div>section:last-child {
            width: 200px;
            height: 150px;
        }

        div>section>p:last-child {
            display: none;
        }

        div>section:last-child>p:first-child {
            position: absolute;
            display: block;
        }

        div>section:last-child>p:last-child {
            position: absolute;
            display: block;
            bottom: 4px;
            right: 2px;
        }

        p {
            padding: 0;
            margin: 0;
            font-size: 12px;
            color: rgb(73, 67, 67);
        }
    </style>

HTML

<!-- 玩家一所玩的扑克牌 -->
    <div class="brand"></div>
    <!-- 玩家二所玩的扑克牌 -->
    <div class="brand"></div>
    <!-- 玩家三所玩的扑克牌 -->
    <div class="brand"></div>
    <!-- 底牌 -->
    <div id="brand"></div>

JavaScript

<script src="./jquery-1.11.1.js"></script> //要引jquery代码包
    <script>
        let pokerArr = []; //创建一个空数组
        //封装扑克牌【用时，直接调用】
        function playcards() {
            let fangpaiArr = [3, 4, 5, 6, 7, 8, 9, 10, "J", "Q", "K", "A", 2]; //创建牌的种类
            let brandstyleArr = ["♣", "♦", "♥", "♠"]; //创建牌的类型
            let emptyArray = [];
            let emptyArray2 = [];
            let emptyArray3 = [];
            let emptyArray4 = [];
            // 生成54张扑克牌   
            function brandsort() {
                for (let i = 0; i < fangpaiArr.length; i++) {
                    for (let j = 0; j < brandstyleArr.length; j++) {
                        emptyArray.push({ Num: i, Hua: j, emptyArrayText: brandstyleArr[j] + fangpaiArr[i] });
                    }
                }
                // 加上小王与大王
                emptyArray.push({ Num: fangpaiArr.length, emptyArrayText: "小王" }, { Num: fangpaiArr.length + 1, emptyArrayText: "大王" });
                fapai(emptyArray, 0, emptyArray.length)
            }
            brandsort();
            // 随机发给三个玩家【每个玩家随机17张扑克牌】
            function fapai(emptyArray, min, max) {
                for (let i = 1; i <= 3; i++) {
                    for (let j = 1; j < 18; j++) {
                        // 生成随机扑克牌
                        let roundNum = parseInt(Math.random() * (max - min)) + min;
                        emptyArray2.push(emptyArray[roundNum]);
                        emptyArray.splice(roundNum, 1); //去重
                        max--;
                    }
                    userPaiSort(emptyArray2);
                    emptyArray2 = [];
                }
            }
            //对三个玩家进行排序
            function userPaiSort(playPublic) {
                playPublic.sort(
                    // (a,b)=箭头函数 === a的数字 == b的数字 ? a的花色 - b的花色 : a的数字 - b的数字
                    (a, b) => a.Num == b.Num ? a.Hua - b.Hua : a.Num - b.Num
                )
                screenPlay(playPublic);
            }
            function screenPlay(playPublic) {
                for (let k of playPublic) {
                    emptyArray3.push(k.emptyArrayText);
                }
                pokerArr.push(emptyArray3)
                emptyArray3 = [];
            }
            for (let f of emptyArray) {
                emptyArray4.push(f.emptyArrayText)
            }
            pokerArr.push(emptyArray4)
        }
        // JQuery
        $(function () {
            playcards(); //调用封装好了的扑克牌
            for (let k = 0; k < pokerArr.length; k++) {
                // 打印三个玩家的扑克牌与三张底牌
                let str = '';
                for (let l = 0; l < pokerArr[k].length; l++) {
                    str += `<section><p>${pokerArr[k][l]}</p><p>${pokerArr[k][l]}</p></section>`
                }
                $('div').eq(k).html(str)
            }
        })
    </script>