(一) cardGame-界面设计

JavaScript , 评论

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

设计页面

1. 设计页面中的游戏标题、倒计时、点击次数

  • 先设计好HTML结构，HTML结构中每个元素先预定好class类选择器的名字
  • 在页面相同目录下创建fonts目录，将字体文件 恐怖蜘蛛.ttf 放在里面
  • 在style标签中 使用@font-face引用字体
  • 页面中盒子计算方式为 boder-box
  • 将页面字体设计为 自定义的 “蜘蛛”
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
<!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;
        }
    </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>

</body>
</html>

结果如下图所示

2. 游戏标题和信息排版布局

  • 设计一个背景，让颜色感觉恐怖一点，这是我设置成暗红，使用了CSS3中的渐变
1
2
3
4
body {
	margin: 0;
	background: radial-gradient(#F15F66, #7E2625);
}
  • 设计游戏标题的基础CSS，其实也就是颜色、字体大小、字体粗细、文本的位置等等, 这些也是常用的CSS样式
  • 游戏信息的文字颜色和大小也需要设计
1
2
3
4
5
6
7
8
9
10
.game-title {
    color: #EBD408;
    text-align: center;
    font-size: 4em;
    font-weight: normal;
}
.game-info {
    color: #F0F4F7;
    font-size: 3em;
}
  • 游戏信息这部分的布局，设计了三个样式 game-container,game-info-container, game-info
  • game-container是游戏信息最上层的容器, 选择grid网格布局，内容居中，格子之间定义一定的间隙
  • 关于grid 网格布局，后续会有详细的案例来说明, 也可以查看CSS3文档
1
2
3
4
5
6
.game-container {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: center;
    gap: 10px;
}
  • game-info-container这个容器的布局采用 flex, 让两个文字最终会显示在两端
1
2
3
4
5
.game-info-container {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
}
  • 完整代码和效果图
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
<!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>
    </div>

</body>
</html>

下一篇中来设计一下扑克牌，也会用到常见的CSS样式，特别是position, z-index, 过渡效果等

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

个人简介。