TypeScript 入门第一天小练习 （贪吃蛇）

前言：刚入门第一天，试着敲一个例子，经典案例贪吃蛇 （附截图）

一、先创建食物类（Food）

class Food {
   
    //定义一个属性来指向食物对应元素
    element: HTMLElement;
    constructor() {
   
        this.element = document.querySelector('#food')!;
    }
    //定义一个获取食物x轴坐标的方法
    get X() {
   
        return this.element.offsetLeft;
    }
    //定义一个获取食物y轴坐标的方法
    get Y() {
   
        return this.element.offsetTop;
    }
    //修改食物位置方法
    change() {
   
        //生成一个随机的位置0-290
        let left = Math.round(Math.random() * 29) * 10
        let top = Math.round(Math.random() * 29) * 10
        this.element.style.left = left + 'px'
        this.element.style.top = top + 'px'
    }
}

export default Food;

二、继续蛇类（snake）

class Snake {
   
    head: HTMLElement;
    bodys: HTMLCollection;
    element: HTMLElement;
    constructor() {
   
        this.element = document.getElementById('snake')!
        this.head = document.querySelector('#snake>div')!;
        this.bodys = this.element.getElementsByTagName('div')
    }
    //获取蛇头的坐标
    get X() {
   
        return this.head.offsetLeft;
    }
    get Y() {
   
        return this.head.offsetTop;
    }
    set X(value) {
   
        if (this.X === value) {
   
            return;
        }
        if (value < 0 || value > 290) {
   
            throw new Error('撞墙了')
        }
        if (this.bodys[1] && (<HTMLElement>this.bodys[1]).offsetLeft === value) {
   
            if (value > this.X) {
   
                value = this.X - 10
            } else {
   
                value = this.X + 10
            }
        }
        this.moveBody();
        this.head.style.left = value + 'px';
        this.checkHeadBody();
    }
    set Y(value) {
   
        if (this.Y === value) {
   
            return;
        }
        if (value < 0 || value > 290) {
   
            throw new Error('撞墙了')
        }
        if (this.bodys[1] && (<HTMLElement>this.bodys[1]).offsetTop === value) {
   
            if (value > this.Y) {
   
                value = this.Y - 10
            } else {
   
                value = this.