用TypeScript写贪吃蛇（9）：蛇撞墙和吃食物逻辑_try{ this.snake.x = x; this.snake.y = y; }catch(e)

1. 蛇撞墙机制

在Snake类中修改setter。X和Y的setter用于控制蛇头的坐标移动，如果蛇的坐标在游戏区域以外，则表明撞墙，此时游戏结束。

1.1 避免偶尔失灵的问题

这是个应该处理的问题，因为每次蛇的移动只会移动一个方向，因此横坐标或纵坐标没发生改变的时候，就没有必要进行更改来消耗性能。因此新值和旧值相同的时候，则直接返回，不再修改。同时讲课的老师讲了不加这个代码，后面的身体的移动会有bug，虽然自己实测并没有测出来哈哈哈。

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

  this.head.style.left = value + "px";
}

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

  this.head.style.top = value + "px";
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

1.2 蛇撞墙判断

同时在setter里设置撞墙逻辑，如果超出墙的范围，抛出异常，因为游戏暂停与否是GameControl类在控制。

X和Y的setter代码里添加如下判断：

// X的值的合法范围在0-290px之间
if (value < 0 || value > 290) {
  // 进入判断，说明蛇撞墙了
  throw new Error("蛇撞墙了");
}
1
2
3
4
5

抛出的异常在GameControl需要处理。GameControl里有控制游戏是否结束的属性isLive。所以捕捉异常后，将isLive改为false，游戏结束。

// 修改改变后的蛇的坐标
try {
  this.snake.X = X;
  this.snake.Y = Y;
} catch (error) {
  // 进入到catch说明出现了异常，游戏结束。
  alert(error.message + "GAME OVER");
  // 将isLive设置为false
  this.isLive = false;
}
1
2
3
4
5
6
7
8
9
10

2. 蛇吃食物逻辑

在GameControl类中添加方法checkEat，判断蛇是否吃到了食物，同时修改食物的位置、记分牌分数和增加一节身体等。

checkEat(X: number, Y: number) {
  if (X === this.food.X && Y === this.food.Y) {
    // 食物的位置要进行重置
    this.food.change();
    // 分数增加
    this.scorePanel.addScore();
    // 蛇要增加一节
    this.snake.addBody();
  }
}
1
2
3
4
5
6
7
8
9
10

checkEat直接在run方法中被调用，方便维护。

3. 测试结果

可以看到，功能基本完成了，但是只有蛇的头动了，蛇的身体并没有动。

后续工作

• 蛇身体的移动
• 判断是否撞到了自己
• 蛇掉头问题