TS学习，b站 尚硅谷 贪吃蛇实现

坐标：

00_TS简介_哔哩哔哩_bilibili

目的：

复习ts语法，体会ts代码的思维，理解贪吃蛇游戏实现思路

思路：

1.“吃”到食物判断：

蛇与食物坐标一样

2.食物位置随机生成，不能生成到蛇的身体

3.加分控制升级，每...分升级

4.修改蛇偏移量实现蛇的移动

5.定时器实现蛇的自动移动，随等级升高减少调用间隔提高蛇移动速度

6.蛇撞墙的逻辑，判断坐标是否在x的合法范围，撞墙后抛出错误。在蛇坐标处捕获，给出游戏结束提示并停止蛇移动。

7.蛇身体移动逻辑，当前子div移动到前一个子div位置。从后往前改

8.禁止蛇的掉头，在身体大于1且向右移动时，不能往右走，其他同理。

9.蛇移动时撞到自己判断，蛇头新坐标与蛇身体坐标是否有重复

步骤

下载依赖

npm i

npm i -D less less-loader ...

搭建静态结构

总体结构

游戏舞台

蛇容器

计分板

食物

总体样式

....

定义类

食物类

属性：食物下一个位置

获取食物位置方法

计分牌类

属性：分数，等级，等级限制，升级分数

加分方法

升级方法

蛇类：

属性：

蛇头html元素(子div的第一个)

蛇身体(包括蛇头)html元素

方法：

1.获取蛇坐标方法

2.增加身体的方法

3.身体移动方法：

循环蛇身体，获取子div前一个子div的位置。

判断蛇调头，蛇调头的话保留原值

游戏控制类

属性：存储键盘按键(蛇移动方向)，判断蛇活着的变量，

方法：

1.初始化方法：

键盘监听，调蛇移动的方法

2.键盘按下响应方法：

在初始化方法中监听键盘按下时调用的回调函数，注意获得按键时this指向。

在存储按键时注意按键判断

3.让蛇移动的方法;

根据按下的键修改蛇的偏移量

4.检查蛇吃到食物的方法：

重置食物位置，增加分数，增加蛇位置

零散的东西

1.css设置变量

2.关羽蛇身体的间隔，border为什么不占用px

3.从dom拿id，可能拿不到

4.Math.round向上/下取整，获得0~29的整数

5.文件细分：一个类一个模块

6.this关键字，谁调用就是谁的，可以通过bind改变this指向

7.this.scoreEle.innerHTML = ++this.score + '';：

.innerHTML属性返回元素中间夹着的东西

let element = document.getElementById('myElement') as HTMLElement;

// 获取 innerHTML
if (element) {
  console.log(element.innerHTML); // 输出: "Old content"
}
...

.innerHTML可以轻松地操作和更新元素的内容，但需要注意安全和性能问题。

8.蛇类的禁止调头判断

(this.bodies[1] as HTMLElement).offsetLeft === value

拿头的新旧x坐标对比，相等时判断为调头

9.游戏控制类，run函数结尾

// 开启一个定时调用

this.isLive && setTimeout(this.run.bind(this), 300 -(this.scorePanel.level-1)*30);

控制游戏的结束与蛇动画的调用，根据等级改变蛇的速度。当run函数不再被调用时游戏结束

对象的简单理解

对类进行操作，谁负责就在哪里写，细分类。

易于维护与拓展，

关键：理解明确操作/分工归属

可优化的地方:

1.食物有可能出现在蛇身体里

2.各种游戏机制，穿墙，障碍物等