用TypeScript写贪吃蛇（8）：GameControl游戏逻辑（二）-蛇的移动和游戏结束

1. 蛇的移动实现方法

在上篇文章可以得到，我们已经实现了在游戏初始化后，将键盘事件进行绑定，按下的按钮会被GameControl类中的direction属性记录。

现在根据direction进行判断，假设此时的direction是左边，蛇头的坐标便向左移动一节（10px），并在游戏结束前不断地进行判断，以保持蛇的持续移动。

run方法便是控制蛇持续移动的方法。最下边开启了定时器，保持了run方法的持续被调用。

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

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

  // 判断按键方向后改变蛇头的坐标
  switch (this.direction) {
    case Direction.Up:
      Y -= 10;
      break;
    case Direction.Down:
      Y += 10;
      break;
    case Direction.Left:
      X -= 10;
      break;
    case Direction.Right:
      X += 10;
      break;
    default:
      break;
  }

  // 修改改变后的蛇的坐标
  this.snake.X = X;
  this.snake.Y = Y;

  // 开启一个定时调用，时间间隔和level相关
  if (this.isLive) {
    this.timeInterval =
      this.baseTimeInterval - (this.scorePanel.getLevel() - 1) * 30;
    setTimeout(this.run.bind(this), this.timeInterval);
  }
}

2. 判定蛇是否死亡

从上面的代码可以看到了一个新属性isLIve来记录蛇是死是活。如果蛇死了，那当然是”run“不了了。

// 创建一个属性用来记录游戏是否结束
private isLive: boolean = true;

3. Snake.ts 代码

// 引入其他的类
import Snake from "./Snake";
import Food from "./Food";
import ScorePanel from "./ScorePanel";
import Direction from "./Direction";

// 游戏控制器，控制其他的所有类
class GameControl {
    // 基础运动间隔事件
    private baseTimeInterval: number = 300;
    private timeInterval: number = this.baseTimeInterval;

    // 定义三个属性
    // 蛇
    private snake: Snake;
    // 食物
    private food: Food;
    // 记分牌
    private scorePanel: ScorePanel;

    // 创建一个属性来存储蛇的移动方向
    private direction: string = "";
    // 创建一个属性用来记录游戏是否结束
    private isLive: boolean = true;

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

    // 游戏的初始化方法，调用后游戏立即开始
    private init() {
        // 绑定键盘按键按下的事件
        document.addEventListener("keydown", this.keyDownHandle.bind(this));
        // 调用run方法，使蛇不停移动
        this.run();
    }

    // 创建一个键盘按下的响应函数
    private keyDownHandle(event: KeyboardEvent): void {
        console.log(this);
        // 修改direction
        this.direction = event.key;
        console.log(this.direction);
    }

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

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

        // 判断按键方向后改变蛇头的坐标
        switch (this.direction) {
            case Direction.Up:
                Y -= 10;
                break;
            case Direction.Down:
                Y += 10;
                break;
            case Direction.Left:
                X -= 10;
                break;
            case Direction.Right:
                X += 10;
                break;
            default:
                break;
        }

        // 修改改变后的蛇的坐标
        this.snake.X = X;
        this.snake.Y = Y;

        // 开启一个定时调用，时间间隔和level相关
        if (this.isLive) {
            this.timeInterval =
                this.baseTimeInterval - (this.scorePanel.getLevel() - 1) * 30;
            setTimeout(this.run.bind(this), this.timeInterval);
        }
    }
}

export default GameControl;

3. 后续应该实现的功能

• 蛇撞墙后死亡
• 吃食物会变长
• 自己撞自己会死亡