(四) cardGame-扑克牌正面

JavaScript , 评论

制作一个简单的翻牌游戏， 使用HTML5/CSS3设计界面, Javascript翻牌对比； 麻雀虽小，五脏俱全, 此项目将CSS中常见的技术应用在项目中，使用JavaScript原生开发，设计简单，便于快速掌握CSS3和JavaScript的用法; 某些知识点再通过其它视频或文档去了解，事半功倍。

扑克牌正面数字

0. 之前的页面效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>翻牌游戏</title>
    <style>
        @font-face {
            font-family: "蜘蛛";
            src: url(fonts/恐怖蜘蛛.ttf) format("truetype");
        }
        /* 盒子的计算方式 */
        * {
            box-sizing: border-box;
        }
        /* 设置整个页面的字体，最小宽度和最小高度,单位使用vw,vh */
        html {
            font-family: "蜘蛛", serif;
            min-width: 100vw;
            min-height: 100vh;
        }

        body {
            margin: 0;
            background: radial-gradient(#F15F66, #7E2625);
        }
        /* 标题样式 */
        .game-title {
            color: #EBD408;
            text-align: center;
            font-size: 4em;
            font-weight: normal;
        }
        /* 游戏信息文字样式 */
        .game-info {
            color: #F0F4F7;
            font-size: 3em;
        }
        /* 游戏标题容器布局样式 */
        .game-container {
            display: grid;
            grid-template-columns: repeat(4, auto);
            justify-content: center;
            gap: 10px;
        }
        /* 内部布局样式 */
        .game-info-container {
            grid-column: 1 / -1;
            display: flex;
            justify-content: space-between;
        }


        /* 扑克牌 */
        .card {
            position: relative;  /* 相对位置 */
            height: 175px; /* 扑克牌高度 */
            width: 125px; /* 扑克牌宽度 */

            /* 测试用样式,后面删除 */
            border: 1px white solid;
        }
        /* 扑克牌正面和背面通用样式, 两个div层需要重合，使用的是position:absolute */
        .card-face {
            position: absolute;
            width: 100%;    /* 相对于父元素宽度 也就是div.card */
            height: 100%;   /* 相对于父元素高度 也就是div.card */

            /* 内部元素的排版布局方式为flex */
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;

            /* 背面和正面的圆角设计 */
            border-radius: 12px;
            border-width: 1px;
            border-style: solid;
            font-size: 7em;

            
            /* 隐藏背面 */
            /* backface-visibility: hidden; */
            /* transform变换动画 */
            transition: transform 500ms ease-in-out;
        }

        .card-back {
            background-color: black;
            border: #FF6D11;
        }
        .card-front {
            background-color: #FFBB88;
            border-color: #333333;
            transform: rotateY(180deg);
        }
        .card:hover .card-back {
            /* transform: rotateY(-180deg); */
        }
        .card:hover .card-front {
            /* transform: rotateY(0); */
        }


        /* 背面图片布局 */

        /* 使用绝对位置 */
        .cobweb {
            position: absolute;
            width: 45px;
            height: 45px;

            /* 当高度和宽度变化时的动画 */
            transition: width 100ms ease-in-out, height 100ms ease-in-out;

        }
        /* 四个角上的图片 */
        .cobweb-top-left {
            top: 0;
            left: 0;
            transform: rotate(270deg);
        }
        .cobweb-top-right {
            top: 0;
            right: 0;
        }
        .cobweb-bottom-left {
            bottom: 0;
            left: 0;
            transform: rotate(180deg);
        }
        .cobweb-bottom-right {
            bottom: 0;
            right: 0;
            transform: rotate(90deg);
        }

        .spider {
            align-self: flex-start;
            transform: translateY(-20px);

            /* 蜘蛛transform属性更改时的动画 */
            transition: transform 100ms ease-in-out;
        }

        /* 鼠标放在背面时.spider时transform的值改变 */
        .card-back:hover .spider {
            transform: translateY(0);
        }
         /* 鼠标放在背面时.cobweb时width和height的值改变 */
        .card-back:hover  .cobweb {
            width: 55px;
            height: 55px;
        }
 
    </style>
</head>
<body>
    <!-- 游戏标题设计 -->
    <h1 class="game-title">翻牌游戏</h1>

    <div class="game-container">
        <div class="game-info-container">
            <div class="game-info">
                倒计时: <span id="timeRemaining" class="time-remaining">60</span>
            </div>
            <div class="game-info">
                点击次数: <span id="clickCount" class="click-count">0</span>
            </div>
        </div>


        <!-- 扑克牌 -->
        <div class="card" data-number="8" data-turn="back" onclick="handlerClick(this)">
            <!-- 背面 -->
            <div class="card-back card-face">
                <img src="imgs/Cobweb.png" class="cobweb cobweb-top-left">
                <img src="imgs/Cobweb.png" class="cobweb cobweb-top-right">
                <img src="imgs/Cobweb.png" class="cobweb cobweb-bottom-left">
                <img src="imgs/Cobweb.png" class="cobweb cobweb-bottom-right">
                <img src="imgs/Spider.png" class="spider">
            </div>
            <!-- 数字面  ♠ ♥ ♣ ♦-->
            <div  class="card-front card-face">
                <div class="card red" data-value="8  ♠"></div>
            </div>
        </div>

 
    </div>

</body>
</html>

注意在开发本节内容时注释之前的翻转功能

1
2
3
4
5
6
7
8
9
/* 隐藏背面 */
/* backface-visibility: hidden; */

.card:hover .card-back {
/* transform: rotateY(-180deg); */
}
.card:hover .card-front {
/* transform: rotateY(0); */
}

1. 使用伪类和data-x 属性

  • 在div.card中定义两个伪类 .card::before, .card::after 用于显示扑克牌数字
  • 扑克牌页面代码中定义了data-value
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 扑克牌 -->
<div class="card" data-number="8" data-turn="back" onclick="handlerClick(this)">
    <!-- 背面 -->
    <div class="card-back card-face">
        <img src="imgs/Cobweb.png" class="cobweb cobweb-top-left">
        <img src="imgs/Cobweb.png" class="cobweb cobweb-top-right">
        <img src="imgs/Cobweb.png" class="cobweb cobweb-bottom-left">
        <img src="imgs/Cobweb.png" class="cobweb cobweb-bottom-right">
        <img src="imgs/Spider.png" class="spider">
    </div>
    <!-- 数字面  ♠ ♥ ♣ ♦-->
    <div  class="card-front card-face">
        <div class="card red" data-value="8  ♠"></div>
    </div>
</div>
  • 定义伪类样式
1
2
3
4
5
6
7
/* 扑克牌正面数字 */
.card::before, .card::after {
    /* 获取扑克牌上定义的 data-value值作为 content的内容 */
    content: attr(data-value);
    /* 设置字体 */
    font-size: 2rem;
}

如图所示

2. 使用绝对布局

1
2
3
4
5
6
7
8
9
10
/* 扑克牌正面数字 */
.card::before, .card::after {
    /* 获取扑克牌上定义的 data-value值作为 content的内容 */
    content: attr(data-value);
    /* 设置字体 */
    font-size: 2rem;
    
    /* 绝对布局 让before和after的内容可以设置位置 */
    position: absolute; 
}

如图所示

3. 定义伪类content的位置

1
2
3
4
5
6
7
8
9
10
11
/* 伪类 content的位置 */
.card::before {
    top:.1rem;
    left: .1rem;
}
.card::after {
    bottom: .1rem;
    right: .1rem;
    /* 旋转180度 */
    transform: rotate(180deg);
}

如图所示: 可以看到图中的效果和我们想要的有些不同，放在了右上角和左下角，这是因为沿着Y轴有旋转

1
2
3
4
5
.card-front {
    background-color: #FFBB88;
    border-color: #333333;
    /* transform: rotateY(180deg); */  /* 可以暂时注释此行 */
}

4. 定义中间的花色标识

  • 使用flex布局，让花色标识在正中间
1
2
3
4
5
6
<!-- 数字面  ♠ ♥ ♣ ♦-->
<div  class="card-front card-face">
    <div class="card black" data-value="8  ♠">
        <div>♠</div>
    </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
.card {
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
}
.red {
	color: red;   
}
.black {
    color: black;
}

如图所示:

5. 重复定义多个HTML，显示多张扑克牌

  • 注意花色和数字需要更改， 去掉一些注释，比如沿Y轴旋转，还有边框的辅助样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!-- 扑克牌 -->
<div class="card" data-number="8" data-turn="back" onclick="handlerClick(this)">
    <!-- 背面 -->
    <div class="card-back card-face">
        <img src="imgs/Cobweb.png" class="cobweb cobweb-top-left">
        <img src="imgs/Cobweb.png" class="cobweb cobweb-top-right">
        <img src="imgs/Cobweb.png" class="cobweb cobweb-bottom-left">
        <img src="imgs/Cobweb.png" class="cobweb cobweb-bottom-right">
        <img src="imgs/Spider.png" class="spider">
    </div>
    <!-- 数字面  ♠ ♥ ♣ ♦-->
    <div  class="card-front card-face">
        <div class="card black" data-value="8  ♠">
            <div>♠</div>
        </div>
    </div>
</div>

<div class="card" data-number="9" data-turn="back" onclick="handlerClick(this)">
    <!-- 背面 -->
    <div class="card-back card-face">
        <img src="imgs/Cobweb.png" class="cobweb cobweb-top-left">
        <img src="imgs/Cobweb.png" class="cobweb cobweb-top-right">
        <img src="imgs/Cobweb.png" class="cobweb cobweb-bottom-left">
        <img src="imgs/Cobweb.png" class="cobweb cobweb-bottom-right">
        <img src="imgs/Spider.png" class="spider">
    </div>
    <!-- 数字面  ♠ ♥ ♣ ♦-->
    <div  class="card-front card-face">
        <div class="card black" data-value="9  ♣">
            <div>♣</div>
        </div>
    </div>
</div>


<div class="card" data-number="10" data-turn="back" onclick="handlerClick(this)">
    <!-- 背面 -->
    <div class="card-back card-face">
        <img src="imgs/Cobweb.png" class="cobweb cobweb-top-left">
        <img src="imgs/Cobweb.png" class="cobweb cobweb-top-right">
        <img src="imgs/Cobweb.png" class="cobweb cobweb-bottom-left">
        <img src="imgs/Cobweb.png" class="cobweb cobweb-bottom-right">
        <img src="imgs/Spider.png" class="spider">
    </div>
    <!-- 数字面  ♠ ♥ ♣ ♦-->
    <div  class="card-front card-face">
        <div class="card red" data-value="10  ♥">
            <div>♥</div>
        </div>
    </div>
</div>

<div class="card" data-number="4" data-turn="back" onclick="handlerClick(this)">
    <!-- 背面 -->
    <div class="card-back card-face">
        <img src="imgs/Cobweb.png" class="cobweb cobweb-top-left">
        <img src="imgs/Cobweb.png" class="cobweb cobweb-top-right">
        <img src="imgs/Cobweb.png" class="cobweb cobweb-bottom-left">
        <img src="imgs/Cobweb.png" class="cobweb cobweb-bottom-right">
        <img src="imgs/Spider.png" class="spider">
    </div>
    <!-- 数字面  ♠ ♥ ♣ ♦-->
    <div  class="card-front card-face">
        <div class="card red" data-value="4  ♦">
            <div>♦</div>
        </div>
    </div>
</div>

6. 最后完成的效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>翻牌游戏</title>
    <style>
        @font-face {
            font-family: "蜘蛛";
            src: url(fonts/恐怖蜘蛛.ttf) format("truetype");
        }
        /* 盒子的计算方式 */
        * {
            box-sizing: border-box;
        }
        /* 设置整个页面的字体，最小宽度和最小高度,单位使用vw,vh */
        html {
            font-family: "蜘蛛", serif;
            min-width: 100vw;
            min-height: 100vh;
        }

        body {
            margin: 0;
            background: radial-gradient(#F15F66, #7E2625);
        }
        /* 标题样式 */
        .game-title {
            color: #EBD408;
            text-align: center;
            font-size: 4em;
            font-weight: normal;
        }
        /* 游戏信息文字样式 */
        .game-info {
            color: #F0F4F7;
            font-size: 3em;
        }
        /* 游戏标题容器布局样式 */
        .game-container {
            display: grid;
            grid-template-columns: repeat(4, auto);
            justify-content: center;
            gap: 10px;
        }
        /* 内部布局样式 */
        .game-info-container {
            grid-column: 1 / -1;
            display: flex;
            justify-content: space-between;
        }


        /* 扑克牌 */
        .card {
            position: relative;  /* 相对位置 */
            height: 175px; /* 扑克牌高度 */
            width: 125px; /* 扑克牌宽度 */

            /* 测试用样式,后面删除 */
            /* border: 1px white solid; */
        }
        /* 扑克牌正面和背面通用样式, 两个div层需要重合，使用的是position:absolute */
        .card-face {
            position: absolute;
            width: 100%;    /* 相对于父元素宽度 也就是div.card */
            height: 100%;   /* 相对于父元素高度 也就是div.card */

            /* 内部元素的排版布局方式为flex */
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;

            /* 背面和正面的圆角设计 */
            border-radius: 12px;
            border-width: 1px;
            border-style: solid;
            font-size: 7em;

            
            /* 隐藏背面 */
            backface-visibility: hidden;
            /* transform变换动画 */
            transition: transform 500ms ease-in-out;
        }

        .card-back {
            background-color: black;
            border: #FF6D11;
        }
        .card-front {
            background-color: #FFBB88;
            border-color: #333333;
            transform: rotateY(180deg);
        }
        .card:hover .card-back {
            transform: rotateY(-180deg);
        }
        .card:hover .card-front {
            transform: rotateY(0);
        }


        /* 背面图片布局 */

        /* 使用绝对位置 */
        .cobweb {
            position: absolute;
            width: 45px;
            height: 45px;

            /* 当高度和宽度变化时的动画 */
            transition: width 100ms ease-in-out, height 100ms ease-in-out;

        }
        /* 四个角上的图片 */
        .cobweb-top-left {
            top: 0;
            left: 0;
            transform: rotate(270deg);
        }
        .cobweb-top-right {
            top: 0;
            right: 0;
        }
        .cobweb-bottom-left {
            bottom: 0;
            left: 0;
            transform: rotate(180deg);
        }
        .cobweb-bottom-right {
            bottom: 0;
            right: 0;
            transform: rotate(90deg);
        }

        .spider {
            align-self: flex-start;
            transform: translateY(-20px);

            /* 蜘蛛transform属性更改时的动画 */
            transition: transform 100ms ease-in-out;
        }

        /* 鼠标放在背面时.spider时transform的值改变 */
        .card-back:hover .spider {
            transform: translateY(0);
        }
         /* 鼠标放在背面时.cobweb时width和height的值改变 */
        .card-back:hover  .cobweb {
            width: 55px;
            height: 55px;
        }

        /* 扑克牌正面数字 */
        .card::before, .card::after {
            /* 获取扑克牌上定义的 data-value值作为 content的内容 */
            content: attr(data-value);
            /* 设置字体 */
            font-size: 2rem;
           
            /* 绝对布局 让before和after的内容可以设置位置 */
            position: absolute;
        }

        /* 伪类 content的位置 */
        .card::before {
            top:.1rem;
            left: .1rem;
        }
        .card::after {
            bottom: .1rem;
            right: .1rem;
            /* 旋转180度 */
            transform: rotate(180deg);
        }


        /* 中心图标 */
        .card {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .black {
            color: black;
        }
        .red {
            color:red
        }
    </style>
</head>
<body>
    <!-- 游戏标题设计 -->
    <h1 class="game-title">翻牌游戏</h1>

    <div class="game-container">
        <div class="game-info-container">
            <div class="game-info">
                倒计时: <span id="timeRemaining" class="time-remaining">60</span>
            </div>
            <div class="game-info">
                点击次数: <span id="clickCount" class="click-count">0</span>
            </div>
        </div>


        <!-- 扑克牌 -->
        <div class="card" data-number="8" data-turn="back" onclick="handlerClick(this)">
            <!-- 背面 -->
            <div class="card-back card-face">
                <img src="imgs/Cobweb.png" class="cobweb cobweb-top-left">
                <img src="imgs/Cobweb.png" class="cobweb cobweb-top-right">
                <img src="imgs/Cobweb.png" class="cobweb cobweb-bottom-left">
                <img src="imgs/Cobweb.png" class="cobweb cobweb-bottom-right">
                <img src="imgs/Spider.png" class="spider">
            </div>
            <!-- 数字面  ♠ ♥ ♣ ♦-->
            <div  class="card-front card-face">
                <div class="card black" data-value="8  ♠">
                    <div>♠</div>
                </div>
            </div>
        </div>

        <div class="card" data-number="9" data-turn="back" onclick="handlerClick(this)">
            <!-- 背面 -->
            <div class="card-back card-face">
                <img src="imgs/Cobweb.png" class="cobweb cobweb-top-left">
                <img src="imgs/Cobweb.png" class="cobweb cobweb-top-right">
                <img src="imgs/Cobweb.png" class="cobweb cobweb-bottom-left">
                <img src="imgs/Cobweb.png" class="cobweb cobweb-bottom-right">
                <img src="imgs/Spider.png" class="spider">
            </div>
            <!-- 数字面  ♠ ♥ ♣ ♦-->
            <div  class="card-front card-face">
                <div class="card black" data-value="9  ♣">
                    <div>♣</div>
                </div>
            </div>
        </div>


        <div class="card" data-number="10" data-turn="back" onclick="handlerClick(this)">
            <!-- 背面 -->
            <div class="card-back card-face">
                <img src="imgs/Cobweb.png" class="cobweb cobweb-top-left">
                <img src="imgs/Cobweb.png" class="cobweb cobweb-top-right">
                <img src="imgs/Cobweb.png" class="cobweb cobweb-bottom-left">
                <img src="imgs/Cobweb.png" class="cobweb cobweb-bottom-right">
                <img src="imgs/Spider.png" class="spider">
            </div>
            <!-- 数字面  ♠ ♥ ♣ ♦-->
            <div  class="card-front card-face">
                <div class="card red" data-value="10  ♥">
                    <div>♥</div>
                </div>
            </div>
        </div>

        <div class="card" data-number="4" data-turn="back" onclick="handlerClick(this)">
            <!-- 背面 -->
            <div class="card-back card-face">
                <img src="imgs/Cobweb.png" class="cobweb cobweb-top-left">
                <img src="imgs/Cobweb.png" class="cobweb cobweb-top-right">
                <img src="imgs/Cobweb.png" class="cobweb cobweb-bottom-left">
                <img src="imgs/Cobweb.png" class="cobweb cobweb-bottom-right">
                <img src="imgs/Spider.png" class="spider">
            </div>
            <!-- 数字面  ♠ ♥ ♣ ♦-->
            <div  class="card-front card-face">
                <div class="card red" data-value="4  ♦">
                    <div>♦</div>
                </div>
            </div>
        </div>

    </div>

</body>
</html>

最终的效果就完成了，可以多复制几份，然后更改一下数字和花色即可；下一篇将使用js实现扑克牌的比较

哼哈七龙岛主架构师 & 开发者 & 技术分享

个人简介。