(二) cardGame-扑克牌设计

JavaScript , 评论

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

扑克牌设计

1. 扑克牌html结构设计

  • 扑克牌HTML结构设计: 整张牌使用 div 包裹, 样式使用card描述
  • div.card 包含两个子元素 div, 扑克牌的背面div.card-back和正面div.card-front
  • 不管正面和背面都有同样的样式，使用card-face描述
  • data-number 和 data-turn 是自定义的以data-开头的属性，方便使用javascript识别
  • data-number 表示牌的数字值， data-turn用于描述牌显示的是正面还是背面
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
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
<!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;
        }
    </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><!-- game-info-container 结束 -->


        <!-- 扑克牌 -->
        <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><!-- game-container 结束 -->

</body>
</html>

结果如下图所示

2. 扑克牌样式和内部布局

  • 在没有定义div.card, div.card-back, div.card-face 等这些样式时，所有蜘蛛网和蜘蛛都是横向排列
  • div.card样式, 主要是定义好扑克牌的宽度和高度, 还将position设置为relative相对布局，这个就要求对position的用法比较明确
1
2
3
4
5
6
7
8
/* 扑克牌 */
.card {
    position: relative;  /* 相对位置 */
    height: 175px; /* 扑克牌高度 */
    width: 125px; /* 扑克牌宽度 */
    /* 测试用样式,后面删除 */
    border: 1px white solid;
}

结果如图

  • 设计div.card-face样式， 不管背面还是正面的通用样式, 此时采用 position:absolute,脱离标准流
1
2
3
4
5
6
/* 扑克牌正面和背面通用样式, 两个div层需要重合，使用的是position:absolute */
.card-face {
    position: absolute;
    width: 100%;    /* 相对于父元素宽度 也就是div.card */
    height: 100%;   /* 相对于父元素高度 也就是div.card */
}

结果如图

  • 在上图中，蜘蛛图片显示在了外面，需要让其在div.card-face容器中
  • 设置子元素的布局方式为 flex布局
  • 其它样式为扑克牌正面div和背面div的圆角设计
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 扑克牌正面和背面通用样式, 两个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;
}

如图所示

  • 分别设计 背面和正面的不同样式
  • 背景颜色和边框颜色设计，这个比较简单
  • 另外增加了一点transform(变换)动画, 当鼠标悬停在div.card上面时，内部的div.card-back和div.card-front需要沿着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
.card-face {
    
    ......省略

    /* 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);
}

效果如图所示： 此时会发现一个问题，也就是牌的背面没有显示，旋转过来之后还是正面

  • 为了解决上面这个问题，我们需要在 div.card类上增加一个CSS3属性backface-visibility, 默认显示的是背面
1
2
3
4
5
6
7
8
9
.card-face {
    
    ......省略
    
    /*隐藏背面*/
	backface-visibility: hidden;
    /* transform变换动画 */
    transition: transform 500ms ease-in-out;
}

  • 完整代码如下
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
<!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);
        }
    </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>

本篇我们利用CSS中position, display，动画等技术，实现了扑克牌翻转，背后的知识可以查看相关文档。下篇中再来实现背面蜘蛛图片的布局

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

个人简介。