自学 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 类：

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

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

本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；

2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；

3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；

4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；

5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。