# Snake

**Repository Path**: lzxjack/Snake

## Basic Information

- **Project Name**: Snake
- **Description**: 一个使用TypeScript实现的网页贪吃蛇小游戏。
- **Primary Language**: TypeScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-27
- **Last Updated**: 2021-03-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 1. 游戏效果

<a href="https://lzxjack.gitee.io/snake/" target="_blank">[→ 点击此处预览效果 ←]</a>

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

![](https://jack-img.oss-cn-hangzhou.aliyuncs.com/img/20210323123246.gif)

# 2. 实现方法

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

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

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

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