TS实现贪吃蛇

TS很早以前就学了，但是一直没怎么用过，今天用一个贪吃蛇的小项目再来回顾一下TS的内容。话不多说，上代码。

样式代码就不写了，比较简单，下面是HTML的结构。

<div id="main">
    <div id="stage">
      <div id="snake">
        <div></div>
      </div>
      <div id="food">
      </div>
    </div>

    <div id="score-panel">
      <div class="left">
        SCORE: <span id="score">0</span>
      </div>
      <div>
        LEVEL: <span id="level">1</span>
      </div>
    </div>
  </div>

我们知道在TS中最大的好处就是引入了类型检查，并且让我们可以更好的用类的方式来写我们的功能，每个类都有各自的职责，也就是我们说的单一职责，所以我们就需要先搞清楚一个项目中需要用到的类有哪些。

在这里面呢，我们一共需要的时四个类，分别时食物的类Food、记分牌的类ScorePanel，蛇的类Snake以及一个游戏控制的类GameControl，GameControl就是用来控制其他三个类，让其执行的一个总和类。

先从最简单的Food类开始
先是定义一个element属性用来表示对应元素，并给它一个类型为HTMLElement，然后就是在构造函数中把id为food的这个HTML元素赋值给它。接下来就是定义食物的坐标的方法，可以通过offsetTop跟offsetLeft方法得到两个轴的坐标。
接下来就是让食物随机出现了，因为不可能食物总呆在一个地方，所以就要定义一个改变食物位置的方法。首先生成随机数我们可以用Math.random的方法来取0到1之间的随机数，显然太小了，因为我们要让食物呆在游戏框里面，所以就要给它一个限制，我这里是0到290，所以只要在random后面乘29就能拿到0到29的随机数，但是不要忘了用Math.round取整后再乘10才是最终结果。最后将坐标赋值给元素的left跟投票值。

---

接下来就是记分牌的类了，这个类也是比较简单的，主要就是两个方法，一个是加分的方法还有一个是升级的方法。加分的方法是通过先自加再显示到HTML中然后判断分数取模是否等于0来判断的，这里默认值是给的10，也就是每得十分调用一次升级的方法来加一级。
升级的方法呢，这里先是做了一个判断，判断当前等级是否大于最高等级，是则返回最高等级，不再增加等级，不是那么就是等级加一了。

---

然后就是最难的一个蛇的类了，虽然代码很长，但是逻辑还是比较简单的，我们先拆开来一点点看。

class Snake {
  // 蛇头的元素
  head: HTMLElement;
  // 蛇的身体包括舌头
  body: HTMLCollection;
  // 获取蛇的容器
  element: HTMLElement;

  constructor() {
    this.element = document.getElementById("snake")!;
    this.head = document.querySelector("#snake > div")!;
    this.body = this.element.getElementsByTagName('div')
  }

  // 获取蛇的坐标(蛇头坐标)
  get Y() {
    return this.head.offsetTop;
  }
  get X() {
    return this.head.offsetLeft;
  }

  // 设置蛇头坐标
  set X(value: number) {
    // 如果新值和旧值相同,则直接返回不在修改
    if (this.X === value) {
      return;
    }

    // X的值的合法范围0-290间
    if (value < 0 || value > 290) {
      // 进入判断说明蛇撞墙了
      throw new Error('蛇撞墙了!')
    }

    // 判断蛇是否掉头
    if(this.body[1] && (this.body[1] as HTMLElement).offsetLeft === value) {
      if(this.X > value) value = this.X + 10;
      else value = this.X - 10;
    }
    
    this.moveBody();
    this.head.style.left = value + 'px';
    // 检查有没有撞到自己
    this.checkHead();
  }
  set Y(value: number) {
    if (this.Y === value) {
      return;
    }

    // Y的值的合法范围0-290间
    if (value < 0 || value > 290) {
      // 进入判断说明蛇撞墙了
      throw new Error('蛇撞墙了!')
    }

    if(this.body[1] && (this.body[1] as HTMLElement).offsetTop === value) {
      if(this.Y > value) value = this.Y + 10;
      else value = this.Y - 10;
    }
    this.moveBody();
    this.head.style.top = value + 'px';
    this.checkHead();
  }

  // 蛇增加身体的方法
  addBody() {
    this.element.insertAdjacentHTML("beforeend", "<div></div>")
  }

  // 蛇身体移动的方法
  moveBody() {
      // 将后边的身体设置为前边身体的位置
      // 遍历获取所有的身体
      for(let i = this.body.length - 1; i > 0; i--) {
        // 获取前边身体的位置   as 作为类型断言
        let X = (this.body[i-1] as HTMLElement).offsetLeft;
        let Y = (this.body[i-1] as HTMLElement).offsetTop;

        // 把值设置到当前身体上
        (this.body[i] as HTMLElement).style.left = X + 'px';
        (this.body[i] as HTMLElement).style.top = Y + 'px';

      }
  }

  // 检查是否撞到自己的方法
  checkHead() {
    // 获取所有身体 检查是否和蛇头坐标发生重叠
    for(let i = 1; i < this.body.length; i++) {
      let bd = this.body[i] as HTMLElement
      if(this.X === bd.offsetLeft && this.Y ===bd.offsetTop) {
        // 进入判断说明蛇头撞到身体
        throw new Error("撞到自己了!")
      }
    }
  }
}

首先是定义我们需要用到的元素，分别是蛇头、蛇的整个身体还有用来装蛇的容器。然后主要就是获取蛇头的坐标了。

然后就是设置蛇头的坐标，首先就是判断新旧值是否相等，然后就是给输入的值一个范围，如果超出这个范围就抛出一个错误。
接下来呢就是判断蛇是否掉头的问题了，这里以X轴为例，这里的逻辑就是用蛇的第二节身体的位置跟蛇头的位置作比较，如果相等就说明蛇掉头了，所以在这个判断中我们首先要判断蛇存不存在第二节，并且第二节的X轴坐标是否与输入的值相等，是则进去下一个判断条件，这里的条件是通过判断旧值是否大于新值，如果是就说明蛇一直向右走突然向左掉头了，这个时候就应该让新值继续往相同方向增加X轴的坐标。

然后就是调用蛇整个身体移动的方法，通过遍历的方式把所有蛇身体得到，然后将下一节的身体设置为前一节身体的位置，再把值设置到当前身体上。

再接着就是检查是否撞到自己的身体了。

---

最后就是整的控制器类了，这个类也比较简单，它是用来整合前面三个类并且初始化游戏的，还有一些一些游戏相关的方法。

class GameControl {
  // 定义三个属性
  snake: Snake;
  food: Food;
  scorePanel: ScorePanel;

  // 存储蛇的移动方向
  direction: string = '';

  // 记录游戏是否结束
  isLive: boolean = true;

  constructor() {
    this.snake = new Snake();
    this.food = new Food();
    this.scorePanel = new ScorePanel();
    this.init()
  }

  // 游戏初始化方法
  init() {
    // 绑定键盘按下事件
    document.addEventListener("keydown", (e: KeyboardEvent) => {
      this.keydownHandle(e)
    });
    // 调用run方法
    this.run();
  }

  // 键盘按下的响应函数
  keydownHandle(event: KeyboardEvent) {
    this.direction = event.key;
  }

  // 控制蛇移动的方法
  run() {
    // 根据方向(this.direction)来使蛇的位置改变
    /*
    上 top减少
    下 top增加
    左 left减少
    右 left增加
     */

    // 获取蛇现在的坐标
    let X = this.snake.X;
    let Y = this.snake.Y;

    // 局部修改
    switch (this.direction) {
      case "ArrowUp":
        Y -= 10;
        break;
      case "ArrowDown":
        Y += 10;
        break;
      case "ArrowLeft":
        X -= 10;
        break;
      case "ArrowRight":
        X += 10;
        break;
    }

    // 检查蛇是否吃到食物
    this.checkEat(X, Y)

    // 修改蛇的X Y值
    try {
      this.snake.X = X;
      this.snake.Y = Y;
    } catch (e: any) {
      // 出现异常 游戏结束
      alert(e.message);
      this.isLive = false;
    }

    // 开启定时器
    this.isLive && setTimeout(this.run.bind(this), 300 - (this.scorePanel.level - 1) * 30);
  }

  // 定义一个方法 用来检查蛇是否吃到食物
  checkEat(X: number, Y: number) {
    if (X === this.food.X && Y === this.food.Y) {
      // 食物位置重置
      this.food.change();
      // 分数增加 
      this.scorePanel.addScore();
      // 蛇增加一节
      this.snake.addBody();
    }
  }
}