【无标题】

index.ts

import './style/index.less';

class Food{
    element:HTMLElement;

    constructor() {
        // 获取页面中的food元素并将其赋值给element
        this.element=document.getElementById('food')!;
    }

    get X(){
        return this.element.offsetLeft;
    }
    get Y(){
        return this.element.offsetTop;
    }

    change(){

        // 0 - 290
        let left = Math.floor(Math.random()*30) * 10;
        let top = Math.floor(Math.random()*30) * 10;

        this.element.style.left = left + 'px';
        this.element.style.top = top + 'px';

    }
}
// const food=new Food();
// console.log(food.X, food.Y);
// food.change();
// console.log(food.X, food.Y);

class ScorePanel{
    score = 0;
    level = 1;
    scoreEle:HTMLElement;
    levelEle:HTMLElement;

    maxLevel:number;

    constructor(maxLevel:number = 10) {
        this.scoreEle = document.getElementById('score')!;
        this.levelEle = document.getElementById('level')!;
        this.maxLevel = maxLevel;
    }

    addScore(){
        this.score++;
        this.scoreEle.innerHTML = this.score + '';
        if (this.score % 10 == 0) {
            this.levelUp();
        }
    }

    levelUp(){
        if (this.level < this.maxLevel) {
            this.level++;
            this.levelEle.innerHTML = this.level + '';
        }

    }
}