用TypeScript写一个简单的贪吃蛇小游戏_typescript贪吃蛇--食物逻辑代码(3)

作者：神奇cpp | 2024-08-19 13:55:52

踩

typescript贪吃蛇--食物逻辑代码(3)

文章目录

前言
1 项目界面搭建
2 完成Food类
3 计分盘（ScorePanel）类
4 Snake类的编写
5 游戏控制器类（GameControl）
项目效果
项目地址

前言

这个项目是参考尚硅谷TypeScript教程写的，自己做了一些改进，目的是为了练习TypeScript的写法，学会用TS的思维去写代码。

1 项目界面搭建

html结构

<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
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

less结构

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

//清除默认样式
*{
     
    padding: 0;
    margin: 0;
    //改变盒子模型的计算方法
    box-sizing: border-box;
}
body{
     
    font:bold 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;
    //设置主轴的对齐方向
    justify-content: space-around;
    //设置侧轴的对齐方式
    align-items: center;
    
    //游戏的舞台
    #stage{
     
        width:304px;
        height:304px;
        border: 2px solid black;
        //开启相对定位
        position: relative;
        //设置蛇的样式 注意这里设置的是snake里面的div的样式
        #snake{
     
            &>div{
     
            width: 10px;
            height: 10px;
            background-color: black;
            // margin-right: 2px;
            //这里为蛇的身体设置一个边框，目的是为了让蛇的每一段分开，
            //由于边框的背景颜色和舞台的背景颜色一样，所以我们看到的蛇是一段段的
            border: 1px solid @bg-color;
            //开启绝对定位,因为蛇的移动要有参照物
            position: absolute;
            }
            //蛇头是红色的，便于区分
			 &>div:first-child{
     
                background-color: red;
            }
        }
       #food{
     
            width: 10px;
            height: 10px;
            //background-color: rgb(167, 37, 37);
            // border: 1px solid @bg-color;
            position: absolute;
            left: 40px;
            top:100px;
            display: flex;
            //设置横轴为主轴，warp表示自动换行
            flex-flow: row wrap;
            justify-content: space-between;
            align-content: space-between;
            
            &>div{
     
                width
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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/神奇cpp/article/detail/1002571