实现简易版德州扑克|学习麻瓜编程以项目为导向入门前端 HTML+CSS+JS

实现简易版德州扑克|学习麻瓜编程以项目为导向入门前端 HTML+CSS+JS

实现简易版德州扑克

1.先上达到网页效果图(简易版德州扑克)

网页分为发牌区和牌池,上面为发牌区,下面是牌池区
在这里插入图片描述

2. 代码实现
2.1 HTML和JS代码
    <link rel="stylesheet" href="styles.css">
</head>
<body style="background-color:cornflowerblue">
    <div class="pool">

    </div>
    <div style="margin-top: 45px;" class="dealer card"></div>
    <script>
        function sendCard(){
            
            var randomNum = _.random(1,13)
            $('.pool').append(`<div class="card f${ randomNum }"></div>`)

        }
        $('.dealer').click(sendCard)
    </script>
</body>

2.2 CSS代码
    1:<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    2:<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js" integrity="sha256-G7A4JrJjJlFqP0yamznwPjAApIKPkadeHfyIwiaa9e0=" crossorigin="anonymous"></script>

    3:<link rel="stylesheet" href="styles.css">

1是JQuery,2为Underscore,3为link本地自写CSS

下面是自写CSS(style.css)

body {
background-color: cornflowerblue;
}
.card {
height: 175px;
width: 125px;
background-image: url('./cards/back.png');
background-size: 100% 100%;
margin: 3px;
}

.pool {
display: flex;
border-style: dashed;
border-color: aliceblue;
border-width: 2px;
width: 655px;
height: 181px;
}

.f1 {
background-image: url('./cards/f1.png');

}

.f2 {
background-image: url("./cards/f2.png");
}

.f3 {
background-image: url("./cards/f3.png");
}

.f4 {
background-image: url("./cards/f4.png");
}

.f5 {
background-image: url("./cards/f5.png");
}

.f6 {
background-image: url("./cards/f6.png");
}

.f7 {
background-image: url("./cards/f7.png");
}

.f8 {
background-image: url("./cards/f8.png");
}

.f9 {
background-image: url("./cards/f9.png");
}

.f10 {
background-image: url("./cards/f10.png");
}

.f11 {
background-image: url("./cards/f11.png");
}

.f12 {
background-image: url("./cards/f12.png");
}

.f13 {
background-image: url("./cards/f13.png");

}
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

有出路Coding

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值