用TypeScript写贪吃蛇（3）：完成Food类基本功能_class food:

1. Food类代码书写

在贪吃蛇中，食物的基本属性是食物的坐标。首先在index.ts（webpack内约定的入口文件）构造Food类（代码模块化后边再处理）：

// 定义食物类Food
class Food {
    // 定义一个属性表示食物所对应的元素
    private element: HTMLElement;

    constructor() {
        // 获取页面中的food元素并将其赋值给element成员变量
        // 感叹号! : 肯定获取的元素不可能为空，就不用进行空值判断了
        this.element = document.getElementById("food")!;
    }

    // 定义一个获取食物X轴坐标的方法
    get X() {
        return this.element.offsetLeft;
    }

    // 定义一个获取食物Y轴坐标的方法
    get Y() {
        return this.element.offsetTop;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2. 测试

2.1 获取食物坐标测试

// 测试代码
const food  = new Food();
console.log(food.X, food.Y);
1
2
3

如果控制台输出的坐标值和食物的坐标一致，则测试结果正确。

2.2 改变食物位置测试

在Food类中添加change方法，用于修改食物的位置，先测试将食物移动到固定的位置：

// 修改食物的位置
change() {
  this.element.style.left = "80px";
  this.element.style.top = "80px";
}
1
2
3
4
5

写完后写代码进行测试。

测试代码：

// 测试代码
const food  = new Food();
console.log(food.X, food.Y);

food.change();
console.log(food.X, food.Y);
1
2
3
4
5
6

测试结果：

输出的结果和食物的位置和预计的结果相等

3. 实现食物坐标随机生成功能

但是在贪吃蛇中的食物是随机位置生成的，所以后面得将change方法进行改造。每次执行change方法，left和top的值都得是随机值。

游戏界面边框的宽度为2px，游戏界面的边长为204px，食物元素的边长为10px，经过计算，可以得到，食物的top和left的范围为0-290px，才能保证食物的生成在游戏界面内。

同时得注意的是，蛇的坐标永远是10的整数倍，因为设定的蛇的移动的最小单位为一个格子，一个格子为10px。为了使得蛇能和食物坐标一致，食物的坐标也必须是10的整数倍。

改良后的change方法代码如下：

// 修改食物的位置
public change() {
  // 生成一个随机的位置
  // 食物的位置最小是0，最大是290px
  let left = Math.floor(Math.random() * 30) * 10;
  let top = Math.floor(Math.random() * 30) * 10;
  this.element.style.left = top + "px";
  this.element.style.top = left + "px";
}
1
2
3
4
5
6
7
8
9

更改change方法代码后，浏览器每次刷新，食物每次生成的坐标都会发生改变。

4. Food类完整代码：

// 定义食物类Food
class Food {
    // 定义一个属性表示食物所对应的元素
    private element: HTMLElement;

    constructor() {
        // 获取页面中的food元素并将其赋值给element成员变量
        // 感叹号! : 肯定获取的元素不可能为空，就不用进行空值判断了
        this.element = document.getElementById("food")!;
    }

    // 定义一个获取食物X轴坐标的方法
    get X() {
        return this.element.offsetLeft;
    }

    // 定义一个获取食物Y轴坐标的方法
    get Y() {
        return this.element.offsetTop;
    }

    // 修改食物的位置
    public change() {
        // 生成一个随机的位置
        // 食物的位置最小是0，最大是290px
        let left = Math.floor(Math.random() * 30) * 10;
        let top = Math.floor(Math.random() * 30) * 10;
        this.element.style.left = top + "px";
        this.element.style.top = left + "px";
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31