(五) cardGame-游戏逻辑实现

JavaScript , 评论

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

1. 翻牌游戏HTML+CSS代码

  • 以下代码为翻牌游戏的HTML+CSS代码
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
284
285
286
<!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-color: #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>
    <script>
		/* 游戏逻辑脚本 */
        
    </script>
</body>
</html>

2. 定义函数处理点击事件

  • 点击扑克牌时翻转
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 存储先后点击的两张扑克牌 */
let firstCard=null
let secondCard=null

/* 点击事件处理函数，传入div.card元素 */
function handlerClick(element) {

    //翻转扑克牌
    reversal(element)
	
    //如果第一个为null则赋值，否则给第二个赋值
    if(!firstCard) {
        firstCard = element
    }
    else {
        secondCard = element
    }
	
    //两个都不为null时，同时两个不相同时调用比较函数
    if(firstCard && secondCard && firstCard!=secondCard) {
        compare(firstCard,secondCard)
    }
}

3. 实现翻转函数

  • 主要获取元素的data-turn属性，此属性描述了扑克牌是否翻转到背面
1
2
3
4
5
6
7
8
9
10
11
12
13
function reversal(element) {
    let turn = element.getAttribute('data-turn')
    if(turn==='back') {
        element.children[0].style.transform = 'rotateY(-180deg)'
        element.children[1].style.transform = 'rotateY(0deg)'
        element.setAttribute('data-turn', 'front')
    }
    else {
        element.children[0].style.transform = 'rotateY(0deg)'
        element.children[1].style.transform = 'rotateY(180deg)'
        element.setAttribute('data-turn', 'back')    
    }
}

4. 实现比较函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 比较两张牌的值是不是相等 */
function compare(first,second) {
    let firstValue = first.getAttribute('data-number')
    let secondValue = second.getAttribute('data-number')
    if(firstValue == secondValue) {
        firstCard = null
        secondCard = null
		//延时隐藏
        setTimeout(function(){
            first.style.visibility='hidden'
            second.style.visibility='hidden'
        }, 700)
    }
    else {
        //不相等则再次翻转
        setTimeout(function(){
            reversal(first)
            reversal(second)
            firstCard = null
            secondCard = null
        }, 700)
    }
}

5. 实现倒计时

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 倒计时 和点击次数*/
let timeRemaining = document.getElementById("timeRemaining")
let clickCount = document.getElementById("clickCount")
let time = 60
let clicks = 0

let t = setInterval(()=>{
    time--
    timeRemaining.innerText=time
    if(time==0) {
        timeRemaining.innerText=time
        clearInterval(t)
        if(confirm('时间到,游戏失败,点击确定再来一次')) {
            location.reload()
        }
    }
}, 1000);

最终实现的效果如下图

最终代码完成，但是这里会有一些小问题，比如点击速度比较快，小小的BUG解决一下?

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

个人简介。