# TypeScript_Snake

**Repository Path**: trtst/type-script_-snake

## Basic Information

- **Project Name**: TypeScript_Snake
- **Description**: 用TypeScript实现贪吃蛇小游戏
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://trtst.gitee.io/type-script_-snake/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2021-02-04
- **Last Updated**: 2024-10-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# TypeScript_Snake

#### 介绍
TypeScript小练习

![输入图片说明](https://images.gitee.com/uploads/images/2021/0207/144329_22f523aa_5120464.jpeg "QQ截图20210207144216.jpg")

效果预览地址： [贪吃蛇小练习](https://trtst.gitee.io/type-script_-snake)

#### 习前小问题
做出一个贪吃蛇小游戏，需要考虑哪些问题？(纯属个人的想法)

1、如何随机生成食物的位置？并保证不会出现在区域外？

2、蛇是如何移动的？当拐弯后，身体该如何做出相应的变化？

3、移动过程中，撞墙了怎么办？

4、移动过程中，通过什么判断蛇是吃掉了食物？

5、吃掉食物后，蛇的身体变长了，如何展现？食物该如何处理？

6、移动过程中，蛇头拐弯，撞到自身怎么办？

7、吃掉食物后，积分和等级的相应的变化，固定的计算公式

8、如何控制蛇的移动方向？需要使用哪个键盘事件？

9、蛇在自动前进的时候，键盘的前进、后退、向上、向下出现冲突/转向了，怎么办？

10、哪些情况，表示游戏结束？

#### 思路

根据前面的问题，捋一下贪吃蛇的完成思路。

1、页面布局，规划出一个蛇的移动范围

2、随机生成食物的X/Y轴坐标，坐标范围在 0 ~ 区域的宽高

3、每吃掉食物，积分自增1；每10积分，等级升一级

4、吃掉食物后，身体需要增加一截

5、蛇的身体移动：当蛇头移动一步时，后面相邻的身体移动到前面的坐标位置。

   实际代码中，我们需要从身体最后一个开始设置它的坐标位置。

   因为若是从蛇头开始设置，当蛇头移动后，原始的位置已经发生了更改，此时再设置后面身体的坐标，会出错。

6、蛇头在移动后，通过判断蛇头的坐标与蛇身的坐标是否重合，来判断是否撞到了自身

7、蛇头在移动后，通过蛇头的坐标与食物的坐标是否重合来判断是否吃到食物

8、蛇头在移动后，通过蛇头的坐标在区域坐标范围内来判断是否撞墙

9、通过监听键盘keydown事件，控制蛇的上下左右的前进方向，相应的X/Y轴坐标增加或者减少

10、当蛇头移动时，禁止控制蛇向反向移动

11、当检测到蛇吃掉食物后，重复2、3、4

#### 参与贡献
感谢 [尚硅谷2021版TypeScript教程](https://www.bilibili.com/video/BV1Xy4y1v7S2?p=24)