TypeScript 面向对象实现的贪吃蛇小游戏

1. 游戏效果

[→ 点击此处预览效果 ←]

• 方向键控制蛇的移动方向
• 蛇吃到食物后，身体多出一格，分数+1，食物重新刷新位置
• 最大等级为 8 级，每 2 分升一级，升级后蛇的移动速度增加
• 若蛇撞到边界或撞到自己，则游戏结束
• 刷新页面后游戏重新开始

2. 实现方法

贪吃蛇小游戏用 TypeScript 编写，HTML 骨架和 CSS 样式部分比较简单，很多方法都可以实现效果，这里就说一说 TS 的实现思路。

因为小游戏比较简单，所以没用使用webpack等打包，直接写将 TS 编译后的 JS 文件引入页面。TS 部分运用了面向对象的编程思想，首先需要创建四个类，分别是食物类Food、蛇类Snake、计分面板类ScorePanel、游戏控制类GameControl，分别给他们编写相应的属性和方法：

类	属性	方法
食物类Food	绑定页面表示食物的红色方块即可	获取食物 X、Y 坐标 修改食物的位置，即随机生成一个新的食物
蛇类Snake	分别绑定页面的蛇容器、蛇身子、蛇头部分	获取蛇头 X、Y 坐标 设置蛇头 X、Y 坐标 增加蛇身子 蛇身体移动 判断蛇是否撞自己
计分面板类ScorePanel	分数 等级 绑定页面表示分数、等级的部分	加分 升级
游戏控制类GameControl	绑定Snake、Food、ScorePanel类 是否存活的变量（布尔值） 按键方向	游戏初始化 判断键盘按下 蛇移动 判断蛇是否吃到食物

首先游戏控制类进行游戏初始化，通过定时器不断调用蛇移动方法。期间要判断用户按下的按键进行改变方向，判断蛇是否撞到自己、撞墙，判断蛇是否吃到食物，若吃到食物则加分、增加身体、刷新食物位置。根据分数判断是否升级。

3. 仓库地址

源代码已上传至：

1. [Github]
2. [Gitee]

---

欢迎在[我的博客]上访问！