TypeScript实现小游戏---贪吃蛇(超详细)_typescript游戏项目

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新大数据全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip204888 （备注大数据）

正文

ts专栏 ===> 🌈 typescript入门到拔高🌈(已完结)

项目背景及简介

typescript系列到这篇文章正式进入尾声了，我们通过以上学习ts的知识，想要熟悉的掌握必须要写一个小demo综合运用所学的知识，这个项目的目的就是综合ts所学知识，实现面向对象的实际开发！

项目地址 ： https://gitee.com/liuze_quan/ts-greedy-snake

多模块需求分析

场景模块需求

1. 具有长和宽的容器,容器内分成蛇移动和记分牌两个板块
2. 蛇移动的场景设置边界线,边界线一旦触碰直接结束游戏
3. 记分牌记录蛇吃到食物的分数以及等级
4. 蛇吃到食物分数涨一分,每涨一定分数等级提高一级
5. 等级设有上限
6. 等级和蛇移动速度有关

食物类模块需求

1. 在游戏开始时候食物生成在随机位置
2. 当蛇吃掉食物后食物会再次随机出现(出现的位置不能与蛇身重合)

记分牌模块需求

1. 设置限制等级
2. 可以提升等级
3. 可以增加获取的分数

蛇类模块需求

1. 游戏开始的时候只有一个方块(蛇头)，随后每吃掉一个食物则增加一节身体
2. 当游戏进行过程中蛇头碰到身体则结束游戏
3. 蛇的前进是持续的，不能停顿下来，只能去改变方向

控制模块需求

1. 按下方向键开始游戏
2. 只能通过四个方向键改变蛇前进的方向
3. 判断游戏是否结束,蛇是否吃到食物
4. 控制分数和等级是否相应增长,食物是否刷新

项目搭建

ts转译为js代码

我们需要创建tsconfig.json文件，文件代码如下:

{
  "compilerOptions": {
    "module": "es6",
    "target": "es6",
    "strict": true,
    "noEmitOnError&