00:00
好的,那么接下来呢,我们再写下边我们的下一个类,那下一个类的话就是我们的主角了,我们的这个蛇这个类,那蛇这个类的话,其实它用起来会稍微的有一点点的,这个写起来稍微有点点麻烦,为什么麻烦呢?因为蛇的话涉及到很多的业务逻辑,就是我们这个游戏的话,实际上重点的业务逻辑都在蛇这块,所以我们现在写这个蛇的话,我们先不一次性给它写完,我们先把这个蛇给它整出一个雏形,然后我们再整一个我们这个游戏的这个,诶控制器这个类,然后我们再根据需要去对蛇这个类进行完善,所以呢,还是这个套路,我们在这里新建一个这个TS文件,叫做SA叫做snake.ts这个TS文件里面,我们要定制叫做一个class,一个snake,诶一个蛇,那其实你说定义到现在的话,你会发现我的这个套路基本上就已经固定了,那蛇里边需要什么属性,那首先呢,第一。
01:01
这个就是我们要哎获取什么呢?哎,这个叫做表示我们这个蛇,哎蛇的这个诶元素啊,蛇的一个元素,也就是我们整个这个蛇的元素,整个蛇的元素的话,我们直接来一个element element,我们来一个HTML element是吧,HL的元素,这是一个我们先写吧,Constructor我们直接来一个,来一个this,点一个诶,This点一个element等于一个这个哎,Document点一个get elements by ID,然后在这里边我们直接写一个snake snake啊,但是注意啊,还是啊告诉他这是非空的,但是注意啊,我们这么写实际上有一个小的问题,什么问题呢?那如果你要还记得我之前去布置那个页面的布局的时候,我之前说过这么一个问题,就是我这个整个一个蛇,我这个snake实际上这个叫snake,它本身并不代表蛇,它只是一个。
02:01
铜器来装我们这个蛇的各部分,因为蛇它整体是由一节一节构成的,所以这里边我们实际上蛇的每一节是由谁构成的呢?是由我们它里边的这些这些div所构成的,所以我们实际上我们所谓的操作蛇,实际上是在操作蛇里边的这些div,所以其实说直白一点,我们在这里边我这么写,我去获取这个的这个这个玩意儿,我获取它实际上在我们这儿是没有任何的作用的,因为我们这儿我不需要去操作这个,我不需要去操作这个蛇,这这个东西我要用的是不是它里边这些东西啊,所以呢,我可以这样改一下,我这儿呢,我就不整一个element了,我不要element了,我我来干嘛呢?我来一个he he表示什么意思?哎,创建一个表示获取一个表示舌头的元素,也就是说我要获取的是一个舌头,舌头呢,怎么获取呢?舌头在这里边我们可以直接。
03:01
我首先呢,我还是获取一个啊,这个是谁呢?我们这儿直接来一个cost,叫做一个snake SN PE,这是表示的是我们这个蛇,蛇是我们整个这个容器,那舌头是不是就是它里边的这些所有的这个就这个所有div里边的第一个div啊,诶第一个div,所以在这里边我们怎么处理呢?那这样吧,我不这写了,这么写就有点麻烦了,我直接来一个,诶这个再次点一个head,等于一个哎document点一个query select query selector,我们直接写一个井号,一个head,诶叫做一个snake snake大于号div,也就是我,诶直接去获取这个snake里边的所有div,你说老师,那你这个选择器是获取所有div啊,那你怎么体现出是第一个呢?啊,因为我们叫做query select,它是它是不是只会取一个呀,只取一个,那取的那不就是那个第一个吗?哎,但是。
04:01
这里边给我报的一样的问题,这有可能为空,我还是加一个叹号,告诉他这儿干嘛呀,诶,这不为空啊,不为空,哎呀,这还有问题,我们看一下。什么问题?I missing the HTML?Head type to element啊,还是这个这个元素的问题,因为我们这个query select应该是它返回的是一个元素,而我这块类型的话,我写的是HTML element呢,它这个类型啊,它不匹配了啊,它不匹不匹配了怎么办呢?我们可以后边加一个,我们是不是有一个这个类型断言呀,我告诉他HTML element告诉他,诶我这个类型是一个ML元素,我直接给他断一下就行啊,就行了,断言的时候我这个叹号,我看一下叹号其实就可以省略不写了啊,断言的其实就等于就带这个叹号的功能了啊好,那现在的话,我们这个舌头就有了,那么仅仅有舌头的话,其实还不够啊,仅仅有舌头还不够,因为我们这个舌它是不是还会有这个身体啊,哎,还会有身体,所以这个里边的话,我们还需要通过一种方式来获取到我们这个蛇的一个所有的身体,蛇的所有身体的话,我们在这儿是一个,我们直接用一个bodies啊bodies。
05:20
Bodies呢,表示的是我们蛇,蛇的身体,Bodies的话,我们用一个HTML collection啊collection这是什么呢?这是我们蛇的什么呢?蛇的身体,诶,也就是蛇的身体,但是括号它是包括这个蛇头的啊,包括这蛇头的,也就是我们那个snake这个div snake这个div里边的所有的div啊,所有的div,那HTML它是一个集合,这个集合有什么特点,这个集合它是会实时的刷新的,也就是当我们去往它里面添加新元素的时候,比如说我往这个snake里边这个div里添加了一个新的元素,这个collection里面会自动补充新元素啊,会自动补充新元素,所以的话我们就写成一个collection,然后这个我们怎么获取呢?这个我们获取的话,你说我用一个document,点一个query select query select old的话也行,Snake我们来一个大一块div,那这个我们用的是一个。
06:20
O,它获取的是它里边的所有div,但是query select它有个问题,它返回的是一个no list not list节点的一个列表,它的特点就是它是死的,就是你获取完了里边有十个元素,就永远都只有十个元素,那这样意味着你每一次添加完元素,你都需要重新去获取,这个呢,我们用起来稍微的那有那么一丢丢的小麻烦,所以呢,我在这儿我不用这个query select,它会有点麻烦,那不用它用谁呢?那还得用我们的老朋友get element白D,我们先来一个snake snake,然后呢,我们再点一个get elements by tag name来一个div,获取它里边的所有div啊,获取它里边的所有div,它返回的是一个什么呢?是一个这个connection,那这样就可以解决我这个问题了啊,然后呢,这儿我还是它有这个空的问题,加一个叹号,告诉他我这个东西不为空,那这里边我就直接赋值了z.bodies等于它。
07:20
好,那这里边我们就把这个身体给它覆过去了,那现在我们这个head就表示是我们这个头部啊,这个bodies就表示的是我们整个蛇的一个这个身体啊身体,然后呢,下边我们再写的话,还是那一个套路,我们要干嘛呢?诶我们要获取我们这个什么呀,有一个蛇我们也需要这个坐标,所以我们要获取蛇的一个坐标,蛇坐标其实就是蛇头的坐标,因为我们所有的验证主要考虑的是蛇头,而蛇身的那块我们不并不主要考虑,所以身体的坐标我们就不管了,我们直接来一个get,一个X,首先获取的一个X坐标,我们直接return一个Z,点一个head,点一个off side left水平坐标,再来一个get一个Y,还是一个return一个Z,点一个head,点一个off side top,这是它的一个垂直坐标,我们有一个获取它的一个坐标的一个方法啊方法。
08:20
有获取坐标的方法了,我们其实还需要一个这个设置蛇的坐标的方法,但是啊,这个我们先写上啊,这个是我们这个获取获取蛇的这个,呃,X这个叫做YY轴坐标。Y轴坐标我们除了有获取的话,我们还得有设置,设置的话,其实我们现在先写一个简单版本,我直接来一个set X,我先写一个简单版本,因为这个的话稍微有点麻烦,待会儿我们需要它里边需要有一些细节,我们需要处理一下,我们先写一个简单版本,待会儿我们再去对它进行维护,哎,Value它自己给我判断是number了,我们直接写了,直接来一个this,点一个这个head,点一个style,点一个left,等于一个Y啊,不要忘了加上这个单位PX,那下边的一个我们这个set,一个y set y也是一样,传个Y6这块名字叫set y,然后的话,诶,这就改成一个top啊,Set X set y我们这儿就有了啊,这个是设我们这个坐标设置,我们这个还是设置蛇头的坐标,身体的坐标我们还没写,待会儿我们再处理,然后蛇,我们想想还有什么东西,我们现在是可以写的。
09:38
还有什么东西,哎,就是我的蛇吃到食物以后,蛇的这个身体是不是要增加一节啊,哎,增加一节,所以呢,在这儿我们来设置一个,我们来设置一个这个蛇。舌这个什么呢?舌啊,增加这个身体的一个方法,哎,我是不是向这个舌里边去增加身体,也就是像哪呢?像这个div里我是不是再加一个新的div啊,或者说我是像这个div里边我再加一个这个新的div叫增加这个身体,那好,增加身体我要怎么去处理一样的套路,增加身体就是像它里边添加一个div,但是刚才我们做了一件事儿,我是不是没有单独去获取它呀,所以在我的对象里并没有一个值是表示这个东西呢?那怎么办呢?我们是不是有蛇头啊,哎,我们有蛇头或者呢,你不说蛇头呢也行,哎,你我们蛇是不是也有别的部分身体啊?哎,那我们有舌头了,我是不是也可以通过舌头去获取到这个这个身体啊,但是其实我会发现我这个设计不好,因为我们其实这个东西它不是完全没用的,我们向向它里边去添加东西的时候,它还是需。
10:55
套用到的,并且呢,我们在这儿的时候,实际上也用到了它,那这样吧,我们干脆再来一个,还是把它存起来啊,获取我们这个蛇的这个什么呀,蛇的这个容器,我们还是给它存起来,ET element也是一个HTML element有了它以后啊,我们稍微的能方便一点啊,方便一点,这来一个这上面写吧。
11:19
哎,来一个这个Z,点一个这个element,等于一个document,点一个get element白D,我们来一个snake,我还是单独获取一下它,然后呢,这我就可以省略了,这我就可以直接来一个z.element就行了啊,然后再回到我们刚才这个,我现在要给蛇增加身体,那是不是就变成了往这个元素里添加一个div啊,方式有很多种,我们来写一个直接来一个爱的一个body,是不是添加身体啊,添加身体我们要像什么呢?像我们这个element中。哎,我要添加一个div,就是一就是div,就是蛇的身体嘛,直接来一个Z,点一个element,我们用一个叫做什么呢?叫做一个insertjacent,一个HTML,像它里边添加一段这个h table代码,第一个参数,它指定的是一个位置,位置的话我们传的是一个叫做before end,什么叫before,就是在它的结束标签之前这个位置啊,结束标签之前的这个位置。
12:21
那么第二个参数呢,我们就简单了,因为是insertjason的HTMR嘛,所以我们在这第二个参数直接传一个div就行了,传一段传一个div,那它的效果呢,就是把这个东西这个元素添加到这个的结束标签的前边,那就是加到它的什么呀,最后大家最后这么一个方法,好,那现在呢,我们这个舌的话,初步呢,我们先写这么多,先写这么多,但是现在存在有问题,什么问题呢?第一个问题就是这个SX,这XY,这并不并不完善啊,并不完善它有问题。第二一个问题就是我们现在呢,没有考虑这个舌,只考虑舌头的移动,并没有考虑舌的这个身体的移动,所以这两个问题大家注意一下,这是我们待会儿要处理的,这个类的话,我们就先不去测试了,因为它现在还没有什么实质的功能,我们要试的话也就试这个set X y管不管事儿,我们就先。
13:22
就不错了,待会儿我们来创建完了,我们这个游戏的一个核心的一个控制器这个类,我们再来说这个蛇的问题啊,这个东西我们还要再去完善啊,完全好,我们来评一下。
我来说两句