自学 TypeScript 第五天，手把手项目搭建

前言：

昨天咱们已经把贪吃蛇的页面写好了，今天咱们来写 TS 部分

TS 我们要用面向对象的形式去编写我们的功能，所以我们要以一个功能去定义一个对象

把这个项目分成几个模块，也就是几个对象功能

Food类（食物类）：

写对象的前提，我们要去定义类，用类去创建对象

首先我们直接 class 一个 Food 类，由于我们的食物是一个 div 所以我们的 Food 类里面必须有一个属性来存放我们的元素

// 食物 Food 类
class Food{
    element:HTMLElement;
    constructor(){
        // 拿到元素 id
        this.element = document.getElementById('food')!;
    }
}

元素有了，现在我们想食物还有哪些功能？

// 获取食物 x 轴坐标的方法

    get x(){
        return this.element.offsetLeft
    }
    // 获取食物 y 轴坐标的方法
    get y(){
        return this.element.offsetTop
    }

如果我们蛇的坐标和食物的坐标一样了，是不是就证明我们吃到了食物，所以我们在 Food 类里面直接写俩 get 方法 获取 offsetTop/Left 就获取到了 x y 轴坐标

 坐标有了，但我们现在食物的位置是固定的，那能固定吗？我们的蛇吃完食物，食物的位置是不是要改变，所以我们的食物一定是随机一个位置

    // 修改食物位置
    change(){
        // 生成一个随机的位置  食物的位置 最小是 0 最大是 290
        // 蛇移动一次是一格，一格大小是 10 所以要求食物的坐标必须是整 10
        let top = Math.round(Math.random() * 29) * 10        
        let left = Math.round(Math.random() * 29) * 10        
        this.element.style.left = left + 'px'
        this.element.style.top = top + 'px'
    }

因为我们的盒子是 300 我们的食物是 10 所以我们食物的位置最大是290，最小是0

而且我们设计蛇移动一次是一格也就是 10 所以我们食物的坐标必须是10的倍数

这样我们食物的 Food 类就完成了

计分板，ScorePanel 类：

接下来我们再写一个简单的，我们的计分板，我们的计分板有两个值，一个是积分一个是等级

还是同理，首先先获取元素

标签：TypeScript,塔建,贪吃蛇,TS部分,食物类,DOOd
来源：