其他分享
首页 > 其他分享> > 自学 TypeScript 第五天,手把手项目搭建

自学 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
来源: