用TypeScript写一个简单的贪吃蛇小游戏

最新推荐文章于 2024-05-05 07:25:20 发布

无知的圆

最新推荐文章于 2024-05-05 07:25:20 发布

阅读量542

点赞数

分类专栏： TypeScript 前端文章标签：前端 typescript

本文链接：https://blog.csdn.net/qq_45904930/article/details/118392350

版权

这篇博客详细介绍了如何用TypeScript编写一个简单的贪吃蛇小游戏，从项目界面搭建到Food类、ScorePanel类、Snake类以及GameControl类的实现，涵盖了游戏的基本逻辑和交互。通过该项目，作者旨在实践TypeScript的编程思想并熟悉类型系统的运用。

摘要由CSDN通过智能技术生成

前言

这个项目是参考尚硅谷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

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