實現簡易版德州撲克|學習麻瓜程式設計以專案為導向入門前端 HTML+CSS+JS
阿新 • • 發佈：2021-02-06
實現簡易版德州撲克|學習麻瓜程式設計以專案為導向入門前端 HTML+CSS+JS
實現簡易版德州撲克
1.先上達到網頁效果圖（簡易版德州撲克）
網頁分為發牌區和牌池，上面為發牌區，下面是牌池區
2. 程式碼實現
2.1 HTML和JS程式碼
<link rel="stylesheet" href="styles.css">
</head> 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" 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");
}