00:01
好,那咱们接着往下进行啊,呃,实物定义完了就比较简单啊,其实我们定义一个类啊,就这么一个套路,你就把这个类整个清楚了,就是它需要哪些属性,需要哪些方法,给它加上就齐活了。嗯,如果你之前习惯了在我们GS里面那种,呃,面向过程那种编写方式的话,可能在这儿你会觉得有点麻烦,但是的话,相信我这么写的话,你越往后写你会发现它越方便,当然前提是你这个类你给他设计好了,越往后写就越方便啊。好,然后呢,下边我们再写个简单的啊,写的东西咱们就是诶,由由浅入深,我们先做最简单的。然后一点一点的在做那些复杂的,还有谁简单呀,那就是我们这个记分牌对吧,这记分牌的工作就太简单了,那这里边的话我们就直接写了,不废话了啊,在这呢,我把这个给他。助调去啊助调在下边我们来定义谁呢。
01:00
哎呀,把它给点出来了来定义。定义我们这个表示这个记分牌的这个类啊,记分牌的这个类,记分牌的话,我们来一个class,我们叫做s score score scorere score,一个panel p nael,诶,Score,一个panel,我们的记分的一个牌啊,记分的一个组件SCO啊,叫做一个score,然后的话,积分牌里边的属性就很明显了,首先你得有一个分数,对吧,然后呢,你还得有一个等级,这玩意儿咱们也就不私有化了,如果你讲究一点理说应该私有化一下,就是用一个private,避免外边改,但是咱们这个其实无所谓啊,所以我就直接来一个S,我们来一个这个类型是一个类型,其实你指不指都行,因为分数的话,一上来我们是有认值的,分数的默认值呢。就是零,所以我可以直接把这个死就写成零就行了,而这个level呢,L level的默认值呢,它就是呃,就是就是一我们写上就完事了啊,这比较简单,然后的话,我们这个分数也好,还是这个等级也好,我们后边都是需要去修改的,要修改我们修改的是谁,是不是修改的是这个SPA呀,零是一个span,这一是不是也得是一个SPA呀,诶span,所以这个时候呢,我们需要整两个东西去把这个这两个元素给它起来,两个元素的一个这个我们想一下叫么名啊,我们叫吧,或者一个一个element,它的类型呢,我们叫做一个HT的一个element,然后呢,还有一个S做一个element element,它的类型呢,也给它一个HT,一个element,那这个时候啊。
02:54
其实我这往后边写呀,Document那么写呀也行,但是我觉得这写这啊稍微有点乱,所以给他赋值的,我们还是在构造函数里进行。
03:03
看。诶看or啊,那这个东西这两个我们已经复制完了,Score跟这level我们就不用管了,单独给这俩赋一下值,这次点一个这个score,一个e Le等于一个document,点一个get element by ID,这个我记得我起的名就叫score啊,就叫score,然后下边一个Z点一个这个叫做一个level,等于一个document,点一个get by,这个呢叫做也是,诶它可能有可能空,但是我们知道它不可能为空,所以把这个叹号给它加上啊,这几个东西啊,写一下注释score和level。用来记录我们这个分数和这个等级,此刻EL这个是我们这个分数和等级。哎,所在的这个元素啊,它在我们这个构造函数中进行初始化,其实在这儿初始化也行啊,在这儿初始化也行,区别不是很大,可以自己试试啊好,这整完了以后,我们这个基本的属性就有了,那下边的话我们就需要诶给他整一下这个方法了,这个。
04:17
这个它需要哪些方法呢?首先的话,我的score和level我都是写成了这个,直接写成一个公共属性,所以我也不需要给他们提供什么,还有C这些属性存存取器了,不需要了,那我们再需要一个就是诶我是不是可能去修改他们呀,哎,我有可能去修改这个死磕的话,还有这个赖我也就说我分数增加了,哎,我等级增加了,我是不是要去进行修改啊,这就简单了,来先添加一个设置一个什么呢?设置一个这个加分的方法。加分的方法。加分呢,我们就叫做一个I的吧,SSC的score天增加这个分数的方法,爱的score的话,我们就是每一次调用的话,我们就加一分,所以我就直接克呢Sz.S克加加是不是自增啊啊是分数自增。
05:19
你自增啊还没完,你自增完了以后,你是不是还得给他们复回去啊,给他们附回去,所以在这儿呢来修改,然后呢,我们还需要一个Z点一个一个E点一个in HTML等于一个Z点一个是不是给改回去,不要忘了拼啊拼,因为需要的是一个字符串,这样是不是就OK了,诶OK了,或者呢,你简写,你就直接加加Z4.s库,然后给它复制回去就行了,那这样就等于把我们那个两步是不是就都给他完成了啊,都给它完成了,这是我们分数,这是加分的方法,来试试吧。来一个cost,叫做一个square square,一个panel。
06:03
等于一个new,一个score,一个panel,又一个score panel的话,然后我们直接来一个score panel,点一个A的score加一分,我们看一下啊,看一下这分能不能变现在零分,要么掉一个以后应该加一分,应该变成变成EE分对吧,E分。这。变诶,你看是不是分数变成一了,变成一了啊,我再掉三次,掉三次的话等于加三分,加三分的话,子块就应该变成了一个,变成一个三啊,变成一个三。我们来看一下诶是不是变成三了,哎,变成三了啊好,那这一块我们就等于就给它也设置完了啊,设置完了然后我们再往下看好,那除了有我们这个加分的方法,我们还得有一个这个升级的方法,哎,我们有一个提升这个等级的一个方法,提升等级的方法的话,我们怎么提升等级,等级我们就Le level up等级提升,等级提升它也是这个套路,等级提升也这个套路也是什么呀,哎,这次点一个level,哎,Level这个e Le点一个inner h inner t也行啊,Inner HTML等于一个加,加一个ZZ点一个level z点一个level,直接提升啊直接提升,那这样还是啊,不要忘了拼串啊,转成字符串,那这样我等级提升是不是就OK了,诶,等级提升这个方法我们就已经有了,但是问题来了。
07:34
问题来了,第一个问题,第一个问题,我们这个等级我是不是无限提升的,我有没有一个上限啊,那在这儿的话,我是希望给它设置一个上限的,因为我们这个蛇的话,其实是每提升一个等级,它的移动速度应该是越来越快的,你要没有一个上限的话,我们这个速度它不可能无限快,那如果是无限快的话,它会你刚提升完了,它就会一下子就撞墙了,所以我们速度会有一个上限啊,有一个上限,速度有上限,那就意味着等级必须得有上限,所以这里面我们需要给等级这设置一个这个上限啊,等级设置一个上限,等级的一个上限是多少,那根据我们的需要,比如说我现在希望等级上限是十,那就意味着超过十级以后,它是不是就不升了,哎不升了,所以在这我可以做一个判断,If一个z.level哎level干嘛呢?哎大于等于十了大,哎叫别提大于等于十,小于十,小于十的时候我才会升级,如果。
08:34
大于十我就不升级了,那这样就避免了我们这个等级无限高的情况,十级就已经最高级了啊,最高级了就这么一个,当然我们需要把十级设置稍微的难一点,你别到了最难的那个最高级了,它很轻松的,那不太好,十级一定是有一定难度了啊,一定难度了好,然后的话,其实呢,我们有一个点其实不太好,你像这啊,我直接写了一个z level z.level小于十,包括我们上边在写这个叫什么玩意儿啊,你看random,我写一个乘以29,这都不太好,为什么呢?因为这个29的话,实际上就是我们的这个屏幕宽度的一个屏幕宽度除以十算出来的这么一个值,所以这里边我们写了一个29以后,就意味着我这屏幕以后的宽度只能是29不能改了,你要想改的话,你只能上里面改源码,所以这样的话,它会降低一些我们这个可扩展性啊,当然现在这么写无所谓了,但是的话,像我们这个等级这儿也是有这个问题,我这写一个十的话,我就等于给他写死。
09:34
死了,写死了以后,也等于是降低了我们这个的一个扩展性,可拓展性,那就是我要想改一下等级,比如说我最高等级我不想十,我想是20,那这个时候你要改的话,也是只能改源码,所以啊,我们在写程序的时候,尽量还是我们说尽量避免出现使用字面的情况,这个值我们最好是以一个这个参数的形式给它设置的,怎么设置哎,比如说我们在这个score panel里边,我们可以设置一个变量,设置一个变量来限制我们这个什么呢?限我们的这个等级等级,那比如说我就叫做一个max level。
10:13
哎,来一个number,这个等级的话,我要用它去限制啊,然后的话在里边我们需要传一个参数,就是一个max Le max level max level的类型呢,是一个啊,我这我等于一个十,这等于十什么意思啊,这等于十什意思,在参数后边加等于,这是我们ES6运啊,这表示什么意思呢?表示是默认值啥意思呢?如果你传参了,我就直接用你传的那个,比如我传了个100,那我就用100,你没传没传我就用什么呢?就用这个默认值,然后的话在这儿我们直接来一个。再次点一个max level,等于max level,我来给它进行一个赋值,那也就是说我现在这个max level就是一个属性了,然后我们这在判断的时候,我就可以不写十了,我直接再点max level,如果你的level小于我们这个最大的这个等级,我就让你升级,否则我是不是就不升级啊,诶不升级就这么一个效果啊,这个值的话可以就是变成了可传可不传了,你不传就是十传了呢,就是你传多少呢就是多少啊好,这是一个,然后的话max level有了,我们这个分数的增加有了,但是问题来了,我什么时候升级。
11:29
我这level up,我总不能在这儿去手动调level up,所以我升级的时候一定是满足了一定条件我才升级,哎,比如说我每十分升一级,诶比如说我每20分升一级,我是不是需要设置一个条件呀,所以升级的这个事儿应该由谁控制呢?应该由我们这个加分的这来碰来控制,什么意思,我们来看一下,判断一下什么呢?判断一下我们这个分数是多少,多少啥意思呢?哎,如果我直接写了啊,If我们这次点一个score模以十等等于零,我就调一下z.level up,我就升一级,啥意思呢?我要判断一下我这个分数能除以十的时候,是不是等于零,如果是等于零,那我就要升一级,那这个时候当我分数是十的时候会升一级,分数是20的时候会升一级,分数是30的时候会升一级,分数是整十倍数的时候是不是就会升一级啊,也就是表。
12:30
考试我每十分会升一级啊,十分升一级,我们来看个效果啊,在这我写个负循环,Let一个I等于零,I小于这个哎,九,然后I加加,我们先执行九次,九次什么呢?扣panel,点一个I的扣加九分,九分的话它应该是变成九,但是level应该是不变的,我们来看啊。好,稍微等一下啊,他这个看一下有点慢,哎,你看正在编译,编译成功了,是不是九分啊,Level没变啊,当我让他执行十次,也就是加十分的时候,那这个level的话应该就变成了一个变成一二了,因为我要升一级嘛,加了十分升一级。
13:13
哎,二级了啊,当我这个level,我这100分我只有100次,我加100分,加100分的时候,Level就应该是十级啊,是十级我们来看看。等一下,现在正在编译啊,正在编译。快一点,诶是不是变成十了,哎,那这时候我当我变成200分的时候,变成200分的时候,这一保存200分的时候,他应该还是十级,因为超过十,超过我们这个最大等级了以后,他是不是就不再去增长了啊,不再增长了,因为这已经到了这个满级了啊,不再升了,你看分数是200,但是level依然是十啊,依然十实际就最高级了这么一个效果,那也就是我这模拟十的话,那其实就是。
14:01
诶每十分升音级,那你说老师我想每三分升音级,或者我想每100分升音级,那你就模拟100,诶你说老师我想这个,我想这个这个这个这个。两分升音一,那这应该就是什么呀?哎,就是一个二啊就是二,那这个时候也是一样的问题,跟下边是一样的问题,那我这写十合不合可不可不可以,可以没问题,但是呢,还是它降低了一个我们的灵活性,比如说我就希望两分声音机,那我是不是还得改源码啊,我希望能让它更灵活一点,所以我们这儿设置一个什么呢?我可以设置一个,设置一个变量表示什么呢?表示我们这个哎升级哎表示我们这个这个。多少分升级,多少分时升级,那我们就是来一个什么呢,我们来一个up up。哎,我们也是一个类型是number,处理方式跟它是一样的,我们直接来一个Z,点一个这个up score等于一个多少呢,我们也是传一个参数。
15:08
升级的分数类型的是number,给它一个默认值等于个十,也就是也是默认值呢,就是一个十,也就是还是每十分升一级,每十分升一级,那你说老师我现在不想每十分升一级了,我想什么呢?我想每两分就升一级,然后呢,最高等级是100级,那你就可以写100,然后逗号二这表示什么意思,最高等级是100,然后是每两分就升一级,那现在我200分,200分的话,我升级就应该变成100级了。啊200分啊,升级变成啊两分升一级对吧,200分那就是21级对吧,等于是诶诶21级。我怎么觉得我这账啊,我这账算不过来了,我这不对了,因为我这儿这个变量我设置了,这这个参数我添加了,但是我这边还魔10呢,还魔10呢,我这应该是模拟谁了,模拟一个Z点一个up,此刻啊,我们设设,既然设置了,我们就模拟它,这样就没问题了。
16:08
看一下。诶,是不是就100级了,哎,就是这样一个效果啊,这样一个效果。诶好,那我们这个分数这个类的话,我们在这儿的话就也就算设置完了,像我们这儿用的两个类,一个是我们的这个,一个是我们的这个这个负的这个类,还有一个是我们这个分数这个类啊,他们都是我们两个非常非常简单的类,但是现在的话,我们还要再说一个问题,就是我们现在这两个类的话,我都是把它写到了index.tx待会儿我们还有其他类,比如说我还有snake这个蛇那个类是吧,我还需要创建一个这个游戏的一个控制器game control这个类,那这个时候我们要把所有的类的话都写到一个文件里的话,行不行,当然没问题,但是都写到一个文件里,实际上它就会对我们的这个维护造成一些困难,让我们不好维护,为啥呀,你把这些文件你都写到一起了,我们管理起来是不是就很麻烦呀?诶很麻烦就是你想改,你得上这里改去,比如说我想改一个这个某一个一行代码,我这里边可能写完了,写一堆,写一。
17:16
维护起来就会变得很麻烦,所以这里边的话,我们需要干嘛呢?需要把我们的这个文件再给他细分一下,我们可以给它分一个模块,一般我们可以怎么分,我们就可以直接一个类就是一个模块,一个类就是一个文件,那这样我们去维护起来的时候,我们想改谁就直接去找那个文件,这样我们这个工作就会变得简单一些啊,简单一些,所以在这里边。我们来直接分一下模块,分一下模块的话,Src里边我们创建一个新的这个目录啊,新的目录我就叫一个Mo dus啊,叫做一个modus,这是我们自己的一个模块,在里边的话,我们直接创建这个TS文件,TS文件呢,我们第一个叫什么呢?叫做一个刚才我们那个负的啊,负的点一个TS,然后的话这个大小写啊,倒是都无所谓啊,都无所谓,那我就直接就跟我们这个类名一样了啊,类名一样了,然后的话,我把负的类里边的所有代码啊,负的类里边所有代码放到这个负的点TX当中啊放进去啊放进去,然后呢,最后我们export,我们直接defaul,把谁呢?把我们这个food作为我们这个默,作为我们这个默认的这个模块给它暴露出去啊,暴露出去,那同理,我们那个score panel,我们也创建一个新的TS文件,我们叫sc score一个EL啊el.s然后呢,把我们。
18:42
是这个panel里边的。所有的东西都粘到我们那个扣panel里面啊,粘到它里面。直接给它粘过来,那然后的话,我们这个类就分了一个模块了,也是不要忘了啊,下边这是测试代码啊,这都是测试代码。
19:00
测试代码啊,可要可不要的,然后呢,我们在这儿还是把它作为我们默认模块给它暴露出去,Exault default,我们来defult,我们来一个库把它暴露出去,那这样的话,我们等于每一个模块就单独的放到每一个类,就单独的放到了一个文件里,你想用,比如说我在这个index.ts里,我想用food,怎么办呢?那我就可以直接import,谁呢?Import,我们这个叫做一个food from,我们叫做一个什么呀?哎,点斜盖我们的一个modu里边的那个food.ts直接对它进行引入,然后在这儿我们直接去new food new food,我们简单的用一下吧,我们来一个food,等于new负的,然后我写它干啥呀?我这里边是不是写好了,完了粘过来。看看好不好使。这一保存直接看效果。哎,还是稍微等一下啊,玩意儿还在编译。哎呀,我又派个编译的,实在是有点儿这个太慢啊,但是还好我们开发的时候,实际上到时候不需要它编译那么频繁,但是我们上课的话会觉得有点麻烦,你看这时候一刷新。
20:11
是不是依然生效,诶依然生效啊,就是在这儿我们做了一个模块化的一个处理,把我们的每一个类放到一个模块里,更易于我们的一个维护啊,更易我们用护,但是用的时候就想着用哪个类,我们就需要对哪个类进行引用,用Co pan也是需要对SCO panel进行引入,好这个是我们的第二个类,我们就给它说完了,还是我们先停一下。
我来说两句