用TypeScript写贪吃蛇（5）：代码模块化_贪吃蛇模块概述

1. 背景

目前为止，咱们的代码都是写在入口文件index.ts中，但是所有的代码都写在这里边并不方便维护。如果能像Java那样，一个类一个文件，就会更容易维护和拓展。

创建一个文件夹，modules文件夹，将类代码迁移到modules文件夹，主函数单独暴露在外。和Java比较不同的是，类的模块需要用export default 类名，将类作为默认模块暴露出去。其他的代码若要引入模块，使用import语句即可。

2. 实施

代码迁移后文件夹结构：

2.1 Food.ts代码

// 定义食物类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";
    }
}

export default Food;

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
32
33
34

2.2 ScorePanel.ts代码

// 定义表示记分牌的类
class ScorePanel {
    // score和level用来记录分数和等级
    private score: number = 0;
    private level: number = 1;

    // 分数和等级所在的元素，在构造函数中进行初始化
    private scoreEle: HTMLElement;
    private levelEle: HTMLElement;

    // 设置一个变量限制等级
    private maxLevel: number;
    // 设置一个变量表示每多少分难度升级一次
    private upScore: number;

    // 默认的最高等级为10
    constructor(maxLevel: number = 10, upScore: number = 10) {
        this.scoreEle = document.getElementById("score")!;
        this.levelEle = document.getElementById("level")!;
        this.maxLevel = maxLevel;
        this.upScore = upScore;
    }

    // 设置一个分数自增1的方法
    public addScore(): void {
        this.scoreEle.innerHTML = ++this.score + '';
        // 判断分数的阈值，达到阈值提升等级
        if (this.score % 10 === 0) {
            this.levelUp();
        }
    }

    // 提升等级方法
    private levelUp(): void {
        // level有最高等级
        if (this.level < this.maxLevel) {
            this.levelEle.innerHTML = ++this.level + '';
        }
    }
}

export default ScorePanel;

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
32
33
34
35
36
37
38
39
40
41
42
43

2.3 index.ts代码

index.ts代码如下，简化的同时，测试代码和期望符合，同时代码的可读性大幅提升。

// 引入样式
import "./style/index.less";

// 引入类
import Food from './modules/Food'
import ScorePanel from './modules/ScorePanel';

// 测试，加30分后，score为30，level为4
const scorePanel: ScorePanel = new ScorePanel();
for (let i = 0; i < 30; i++) {
    scorePanel.addScore();
}
1
2
3
4
5
6
7
8
9
10
11
12