ts+面向对象编程怎么学——一个实践贪吃蛇游戏带你了解

最新推荐文章于 2024-07-10 16:08:37 发布

原创

最新推荐文章于 2024-07-10 16:08:37 发布 · 649 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#游戏 #javascript #前端

项目简介

该项目利用ts语言中的面向对象的思想完成，从而实现一个简单的应用带你体验ts的魅力～

文章目录

项目简介
一、贪吃蛇中的几个对象
二、运行

一、贪吃蛇中的几个对象

在正式做这个项目之前要先明确贪吃蛇游戏可以分为几个模块，在这里可以想象一下，贪吃蛇中可以分为：食物、计分板、蛇这三个对象。那接下来就按照这个顺序一一说明各个对象应该如何完成。

1.食物Food类

对于一个对象来说它无非就是包含方法和属性两点，分析一下食物它具有的属性应该有：坐标位置（X,Y）。而食物这个对象所要包含的方法，就是改变坐标位置的方法，因为在蛇吃到食物之后食物要相应的发生变化change()方法。
change()：调用随机数生成一个位置。
此类的代码：

class Food{
   
   
    elements: HT0MLElement;
    constructor(){
   
   
        //直接写可能会报错，因为取不到这个div，
        //所以会有报错，但我们肯定能获取到 所以用叹号表明可以获取。
        //这就是断言的一种
        this.elements=document.getElementById('food')!;
    }
    //获取食物X轴
    get X(){
   
   
        return this.elements.offsetLeft;
    }
    get Y(){
   
   
        return this.elements.offsetTop;
    }
    change(){
   
   
        //食物位置最小0 最大290 且因为蛇每次移动10px，所以食物要被10整除
        //生成随机位置 round向上取整 floor向下
        let top=Math.round(Math.random()*29)*10
        let left=Math.round(Math.random()*29)*10
        this.elements.style.top=top+'px'
        this.elements.style.left=left+'px'
    }
 }
 export default Food;

这里涉及到了几个ts的知识点：
1、类型断言：指的就是当我们的编译器无法判断出某变量是某类型时，但我们自己很肯定就是一个类型就可对此变量进行断言，语法如下:

XX as String
<String>XX

2、创建每个对象的时候，它都会相应的对应一个HTMLElement元素，详见代码第一行，这其实就是说明对象->实例
3、ts中get X(){}这个X就是一个对象的属性，在这个函数中直接return 你想要表达的属性值就可以设置这个属性，这类似于vue中的一个getter，方便我们在获取属性前对属性进行一些操作。

2.计分盘ScorePannel类

对于此类来说，它应该含有的属性有分数、等级两个属性。
在这里插入图片描述
在这里实现此类的思路是：蛇吃一个食物它的分数score就+1，加到某一个数值其等级就+1，所以此类应该含有两个方法，分别是addScore()和addLevel()，具体的实现代码如下：
addScore():使score属性自增1，然后改变此属性对应的dom显示值后并当该值达到升level时调用addLevel方法。
addLevel()：再没达到最高级前，调用该方法则level自增1。

class ScorePannel{
   
   
    // 记录分数和等级
    score=0;
    level=1;
    //分数 等级所对应的dom元素
    scoreEle:HTMLElement;
    levelEle:HTMLElement;
    // 设置变量限制等级 增加可扩展性，传值为传的值 不传为10
    maxLevel:number;
    // 设置变量表示多少分升一级
    upScore:number;
    constructor(maxLevel:number=10,upScore:number=10){
   
   
        this.scoreEle=document.getElementById('score')!;
        this.levelEle=document.getElementById('level')!;
        this.maxLevel=maxLevel;
        this.upScore=upScore
    }
    // 加分方法 分数自增
    addScore(){
   
   
        this.score++
        this.scoreEle.innerHTML=this.score+'';
        // 判断分数 确定是否升级
        if