用TypeScript写贪吃蛇（2）：HTML和Less代码书写

作者：在线问答5 | 2024-08-19 14:07:26

踩

1. 目标效果

书写前端项目的基本原则是，先完成静态页面代码后（HTML和Less）再完成动态代码（TypeScript）。

目标效果图如下，大小和颜色等都有标注。

下文的代码就不再详述，因为注释特别详细。

贪食蛇

2. HTML代码

<!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>
</head>
<body>

    <!-- 创建游戏的主容器 -->
    <div id="main">
        <!-- 设置游戏界面 -->
        <div id="stage">
            <!-- 设置蛇 -->
            <div id="snake">
                <!-- snake内部的div，表示蛇的各部分 -->
                <div></div>
            </div>

            <!-- 设置食物 -->
            <div id="food">
                <!-- 添加四个小div，来设置食物的样式（花瓣形） -->
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>

        <!-- 设置游戏的积分牌 -->
        <div id="score-panel">
            <div>
                SCORE: <span id="score">0</span>
            </div>
            <div>
                LEVEL: <span id="level">1</span>
            </div>
        </div>
    </div>
</body>
</html>
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

3. Less代码

// 设置变量
@bg-color: #b7d4a8;

// 清除默认样式
* {
    margin: 0;
    padding: 0;
    // 改变盒子模型的计算方式
    box-sizing: border-box;
}

body {
    font: 700 20px "Courier";
}

// 设置主窗口样式
#main {
    width: 360px;
    height: 420px;
    // 设置背景颜色
    background-color: @bg-color;
    // 设置居中
    margin: 100px auto;
    border: 10px solid black;
    // 设置圆角
    border-radius: 20px;

    // 开启弹性盒模型
    display: flex;
    // 设置主轴的方向（纵向）
    flex-flow: column;
    // 设置侧轴的对齐方式
    align-items: center;
    // 设置主轴的对齐方式（每个项目两侧的间隔相等）
    justify-content: space-around;

    // 设计游戏界面样式
    #stage {
        width: 304px;
        height: 304px;
        border: 2px solid #000;
        // 开启相对定位（子绝父相）
        position: relative;

        // 设置蛇的样式
        #snake {
            // & 代表当前选择器的父类
            & > div {
                width: 10px;
                height: 10px;
                background-color: #000;
                border: 1px solid @bg-color;
                // 开启绝对定位
                position: absolute;
            }
        }

        // 设置食物样式
        #food {
            width: 10px;
            height: 10px;
            position: absolute;
          	// 先将食物放置在一定的位置，后面进行修改
            left: 40px;
            top: 100px;

            // 开启弹性盒模型
            display: flex;
            // 设置主轴内项目为横向排列，但是会换行
            flex-flow: row wrap;
            // 设置主轴内项目的对齐方式（两端对齐，项目之间的间隔都相等）
            justify-content: space-between;

            & > div {
                width: 4px;
                height: 4px;
                background-color: #000;
                // 使div旋转45度
                transform: rotate(45deg);
            }
        }
    }

    // 设置记分牌样式
    #score-panel {
        width: 300px;
        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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

4. 静态页面效果

如果没有差错的话，静态页面效果如下：

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】