用TypeScript写贪吃蛇（4）：完成记分牌ScorePanel类

1. 需要实现的功能阐述

贪吃蛇的游戏界面做好后，需要处理下方的记分牌。思考下ScorePanel类需要哪些属性，首先想到，记分牌需要记录分数（score）和等级（level）。同时为了将分数和等级展示到浏览器上，分数和等级在浏览器上对应的元素也必须是类的属性。

// 定义表示记分牌的类
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，每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 + '';
        }
    }
}

2. 功能测试

// 测试，加30分后，score为30，level为4
const scorePanel: ScorePanel = new ScorePanel();
for (let i = 0; i < 30; i++) {
    scorePanel.addScore();
}

测试结果：