00:00
好的,我们的这个项目的基本结构的话,我们的基本的样式呢,已经写完了,那接下来的话,实际上下一步的工作我们就可以来写我们这个GS代码了,但是写之前的话,我们来说一下我们这个充一个问,就是我们还是要说我们这个兼容性问,那我们这个呃,项目的话,我们这个贪吃蛇这个游戏的话,我们是希望兼容一些这个,呃,就是每个浏览器的最新的两版本,那比如说IE的话,可能我就希望兼容IE11啊,兼容IE10这些浏览器,那其实一说兼容性问题主要还是存在于IE这些浏览器,所以我们这写完了以后呢,我们不仅仅要在我们的这个Chrome里试一下,我们也要看一下这个IE啊,在IE里它好不好使。诶,我们直接打开我们这个IE啊,然后的话,把我们这个这个网页在IE当中打开,诶我们会发现实际上在这个IE11当中的话,我的这个项目是好使的,是没有问题的,那我们这切换啊,至少是布局这块是没有问题的啊,那我们现在切换一下。
01:03
哎,切换到我们的什么呢?切换到我们这个爱叶10I10,当我们切换到I意十以后,很明显的看到我们这个控制台这报了一个这个错误啊,报了一个错误,报了一个错误在什么呢?你看啊,人家写了这是哪儿啊,这是呃帮豆点GS诶第二行第4080个字符,因为我们这个压缩过了第4080个字符,这报错了,报错了也就意味着我们这个东西在IE10里面它是不能用的,哎,那个时候我们要看一下它为什么不能用,你想我也用了了,哎,我也用了我们的这个这这这这PSSS了,按道理来讲,这IE11IE10的话应该是都没有问题,但是不好,我们来看一下这个信息,点过来一看,哎呀,你就一点过来就发现了,你看啊,在我们这个帮点GS里是不是出现了一个这个呀,哎,而我们I意十他是不认识这个这个东西的,那这里边为什么会出现这个了,而且我们。
02:03
B也已经用了Bible了,用了Bible以后,按理说这些新版本的代码,它是不是应该就给我们转换成这个老版本了,为什么还会出现cons呢?哎,那注意了,出现这个的原因一定不是在我们的,也不是在我们这个post ss,这个原因就跟我们之前讲那个,呃,Web webpa出打包完了以后,出现箭头函数的原因是一模一样,什么原因啊,哎,就是因为我们在这个里边需要配置一下,像我们箭头函数,我们说默认情况下它是使用箭头函数啊,而我们要兼容老版本浏览器,我们就不能使用箭箭头函数,那你说constant也是一样,默认情况下webpe它会使用这个,哎,那我们不希望他使用,我们可以这来一个来一个这个force啊,让他不去使用这个,诶,这个这个当然我们你这么改的原因是因为我们希望它会兼容到我们这个老版本浏览器,如果你不希望它兼容,你就是兼容chome就行了,兼容什么IE啊,IE去死吧。
03:03
哎,那这个时候你就不用写了啊,我改完了以后,我把我们项目呢,给它重新启动一下。好,重新启动一下,然后在我们这儿再刷新一下,在这个位置关掉啊,在这我刷新一下,走一个来再来看。哎,第一次加载的时间稍微慢一点啊,不着急啊,再来看的话,哎,COST1枚,那至少我们在GS这就没问题了,你看我们这个界面是不是就正常加载了啊,那这样的话就使得我们这个项目诶在我们的IE下也就可以正常去运行了,待会再测就没问题了,但是IE9就不行了啊,IE9就不行了,因为我们用了一些这个f flagx ie9它不支持这些东西,所以我们要想兼容IE9的话,那我们只能不用flex啊,用我们这个定位呀,用浮动去给它进行布局,那如果你有这个需求自己再改,这个跟我们GS这块,TS这块就没有什么关系了啊好,我把ae关掉了,就这一个问题,然后呢,我们来打开一下我们开发者工具,诶,正式的来编写我们这个代码。
04:04
哎,正式了就先放在这儿吧,待会一边写一边去处理就就OK了,然后的话,在这里边我们回到我们这个index.ts来写我们ti代码,把这个先给它注掉,那这里边往下来写的话,我们再写的话,其实我们说了,我们要以一种面向对象的形式去编写我们这个功能,所以我们在这儿要做的事就是,哎,我们要一个功能去定义一个对象,所以我们要做的事儿就是一个对象一个对象去写,那我们现在来看,我们需要先整哪个对象,这个倒没有什么固定的,我们就写的话,我们就是哪个对象简单我们就去写哪个对象,但是我们要写对象的前提是我们要先定义什么呢?定义类啊,定义类,定义类,我们通过类去创建对象吧,哎,那我们现在来想想,我们先定义谁呀?诶,我觉得这个食物它的这个功能应该相对来说会比较简单,所以我们先定义什么呢?定义我们这个食物的这个类,也就是这个。
05:05
什么呢?叫做一个food啊,Food我们直接来一个class,类名的话就简单了,我们直接就叫一个什么呢?就叫一个food啊,就叫一个food,那这个类里边我们需要写什么呢?我们说了对象里就包含两个东西,一个是属性,一个是方法,我们想一下对于实物这个来类来说,它需要哪些属性。哪些属性,食物有啥属性?其实在我们这里边,我们食物是比较简单的,吃完这个食物的话,食物其实就是吃完了以后就加分,吃完了以后加分,那加分的话跟食物本身是没有关系的,每个食物在我们这儿来说,设计都是一分,没有说我一个食物二分,一个食物三分,在这儿没有,所以食物跟食物是一模一样的,所以对于我们这个食物来说,它没有什么太特殊的属性,也不像说别的,可能我吃完这食物会会会爆炸,吃完这个食物会有什么奖励,咱们这儿没有这些功能,所以食物比较简单,但是问题是我们这必须有一个属性,它存的是谁呢?存的是我们这个元素,元素什么叫元素啊?我们这个食物整个是不是一个div啊?哎,那我们在食物这个类里边,是不是也必须得有一个div去指向这个食物啊,哎,去指向这个食物,所以这个时候我们先创建一个什么呢?哎,我们来定义一个属性,来表示我们实物的所对应的那个什么呢?
06:26
所对应的元素,所以在这儿我们直接来一个元素的话,我们起个名叫element,元素类型呢,它的类型就是HTML element,也就是对应的是我们这个元素啊,然后它里边我们写一个构造函数,构造函数那注意了,这里边我们所定义的食物,我们所获取的这个元素,它不需要我们这个构造函数去传进来,因为我们这个这个结构在网页当中是不是已经定义好了,所以我们在给它进行赋值的时候,我们可以直接这次点element,就直接等于一个document.get andd,直接传一个什么呢?直接传一个food,让他直接根据ID是不是去获取到这个对象啊,哎,直接根据ID去获取到这个对象,这样我们是不是就拿到这个element了,但是你看啊,我们这写完了以后呢,它会有一个这个,有一个这个,有一个这个下有一个波浪线又告诉你。
07:27
这有错误,这个会有什么错误呢?哎,注意了,这里边实际上它是给我们做了一个预防,什么意思,document.get白D,我们是根据ID属性值去这个去这个叫什么呀?叫做我们这个,诶这个。网页当中去拿这个div,哎,ID为负的div,但是呃,从正常的就是严格一点来说的话,我们一定能拿到它吗?诶不一定,所以这个时候他这儿的话,实际上是有可能为有可能为空的啊,有可能为空,为空我们是不是就拿不到了,拿不到了,也就是说我们这个值有可能是空空的话,那我们这个元素是不是等于就没有值了啊,没有值了,所以他在这儿给你做一个提醒,我们可以在这儿做一个判断,判断一下啊,它是不是空,可以这么做,但是呢,这里边就没必要了,因为我们这个项目,我们这个东西已经写到这个网页里了,所以对于我们来说,这个元素它不可能不存在,它一定是存在的,所以我们只需要在它后面加一个叹号,告诉你这没问题啊,我们这个元素它不可能为空,你不用管了,因为我这个东西我已经自己给它设计的清清楚楚,明明白白的,所以我们加一个叹号表示什么呢?表示这东西它不不会为空,不会为。
08:45
所以在这儿是干嘛呢?诶是获取我们这个页面中的这个负的元素,诶并什么呢?并将其赋值给我们这个element element直接赋值好,这赋值完了,那也就是我们实物里边的属性的话,我们就给它已经定义完毕了,就这么几个属性啊,就这么一个属性,然后接下来我们需要再处理了一个,就是什么呢?我们这食物它需要哪些方法。
09:16
哎,食物需要哪些方法,食物,食物有什么功能,食物什么功能?哎,食物的功能,首先我们来说第一个功能,当我们去,我们在去做这个贪食蛇这个游戏的时候,我们这个蛇它要在这个往这个屏幕里边游走,对吧,游走于这个屏幕,当我们这个蛇吃到食物的时候,这食物是不是要消失啊?哎,那好问题又来了,我们如何能判断这个蛇是否吃到了食物?如何能判断出来蛇是否吃到食物,我们说很简单,如果蛇的那个上偏移量和左偏移量,就是它这个坐标和我们这个食物的坐标一样了,那是不是就证明我的这个蛇它吃到了这个食物啊,哎,吃到这个食物,所以这个时候我们必须有一个什么呢?有一个方法可以获取到我们这个实物的坐标,所以在这儿我定义第一个方法,定义一个。
10:16
哎,获取我们这个食物,哎,食物X轴。坐标的方法,那所谓的X轴坐标,那就是水平坐标,也就是我们的这个left,所以在这儿我们直接定一个get一个X get X怎么办呢?我们直接给它return一个z.element点一个offet left,哎,我直接把我们当前这个负的这个这个坐标直接给它就返回了啊,Get X,所以你访问的时候,我用的是get方法,你直接点X就可以拿到了,然后再定一个什么呢?定义一个获取实物Y轴坐标的方法,Y轴坐标我们直接写一个get一个y get y的话我们还是同理,那其实Y就是垂直方向,垂直方向我们就直接return一个这个,再点一个element,点一个off set一个top y轴坐标,好,那现在这两个方法有了,我们试一下,我们试一下啊,我们想获取的坐标,我们先来干嘛呢?我们先来创。
11:23
这样一个啊,当然注意啊,这就是测试代码了啊,测试代码,测试代码我们真正用的时候肯定不能这么写啊,Co我们来一个负的等于一个new,一个负的又一个负的,然后在这我们直接来一个cancel.log.lo我们来一个负的点一个这个X,然后再打印一个负的点一个Y,哎,打印一下它的X还有Y轴的坐标,来打开我们这个控制台。看一下啊,它现在正在你看啊,APP update正在更新,你看四十一百这个坐标我们是不是就已经获取到了,哎,获取到了坐标没问题了,通过它们我们待会儿就可以去验证一下它是否吃到食物,当然得有得有蛇的时候再验证是吧?好,那么接下来我们想一下这个食物它还需要哪些方法。
12:15
也就是食物还需要哪些功能,哎,食物还有一个问题,就是我的这个食物它的位置。它是不是固定的。食物的位置它是不是固定的,诶很明显食物的位置不能固定,为什么?因为当蛇吃完这个食物以后,食物的位置是不是发生改变,然后蛇在移动到那个位置再去吃那个食物,所以蛇的位置就是当我们这个蛇吃到这个食物以后,蛇这个食物的位置是需要发生改变的,那问题来了,我这蛇吃完这个食物以后,我这个食物要去哪儿啊?它能不能是一个固定的位置,哎,不能,它一定得是在一个随机的位置啊,随机的位置,所以这里边我们还需要一个方法,还需要一个方法什么呢?我们需要一个修改我们实物的一个位置的方法啊,那这个方法呢,我们就叫做一个change change,我们来一个括号change,那食物的位置怎么改啊,食物的位置其实非常好改,那改位置嘛,z.element点一个style,点一个这个life的,你随便写一个,你写一个这个,你写一个这个80像素,然后呢,你来一个top top,你来一个这个180像素,你这样当然我得去调一下啊,直接调一下,我们调一下这个负点change。
13:37
附点一个change,然后呢,还是打印调完了打印看下这个位置发没发生变化,打印,那这个时候你看啊,刚才还在这儿呢,当我重新加载完了以后,如果我这个趁着生效了以后,我这个位置它是不是应该发生发生改变,我们来看一下,诶这还没还没刷新呢,稍微等一下。诶,这个,诶你看是不是就变了,开始是四十一百,当我调完这个称值以后,位置变成八十一百了,但是很显然啊,很显然我这么写不行,这么写完了以后,我每一次都要称指它的位置是不是都是固定的,诶每一次都要称它的位置是固定的,而我们的要求是什么?每一次这个change它的位置不应该是固定的,也就是每一次它是随机的,也就是我这不能写80,也不能写180,我们要生成的是一个随机的位置,所以在这儿我们要生成一个什么呢?哎,随机的这个位置不能是固定的,那怎么生成随机的位置,那这里边我们先说一个问题,我们的这个实物,它的坐标范围在哪?
14:45
它最左边能到哪?最左边是不是只能到这个位置,它能不能出墙啊?哎,不能出墙是吧?不能出墙啊,最右边呢,最右边是不是只能到这个位置啊,能不能出右边这墙啊,也不能,最上边呢?哎,只能在这个位置,最下边呢也只能在这个位置,所以你要先清楚一下我们实物的坐标范围,那对于水平来说,最左边那这个位置的偏移量是多少?哎,这个位置的偏移量是不是就是零啊?诶你最左边只能到零,那最右边呢?那这个偏移量是多少?这个偏移量是多少?这个偏移量是不是正好是我们屏幕的宽度减去这个实物的大小啊,实物的大小是十,屏幕的宽度是300 300减十,是不是这儿就是二百九啊,也就是说你的这个life的值最小是零,最大是290,那top值是不是也一样啊,因为我这个整个这个区域是一。
15:46
个正方形嘛,哎,正方形,所以这个时候注意我们这个实物的一个位置,最小是什么呢?最小是零,最小是零,最大呢,最大是290啊,最大是290,这是它的一个位置,所以我们要生成随机数是零到290之间的随机数,但是注意还有一个问题,什么问题呢?我们这个实物的坐标是不是随便,只要是在零到290之间就行,比如说我生成的是一个,诶生成的是一个35,我这个坐标行不行,35,诶45,我生成的是这个坐标是行不行不行,为什么不行,因为我们的设计是我的这个蛇,它每移动一次是一格,一格的话就是一个身体大小,那在这儿是吧,一格是不是就十啊,每一次是移动十,每一次是移动十,那如果你食物的坐标是出现35的话,那就会。
16:46
出现我这个蛇永远吃不到这个食物,因为我蛇每一次移动时,每一次移动时,那你怎么一是不是也移动不到35这个数,所以这个时候一定注意我的这个食物的坐标一定是整十的,那你说老师我就折每一次移动一格,OK,你要折每一次移动一格,你可以那么设置,但是这样的话,其实这个东西功做的就会比较奇怪的一个游戏,所以这里边我们设计的就是我们的蛇一次移动的是什么呢?蛇移动。
17:18
一次。就是什么呢?就是一格,一格,一格是什么呢?一格的这个大小就是什么呢?就是十,所以这里边就要求所就要求我们这个实物的坐标,实物的坐标必须是整十,必须是整十,所以这个时候就要求干嘛呢?哎,整十。要求是吧,你要么是十二十三十四十五十这些东西啊,要么一百一百一一百二,必须得是十的倍数啊,必须得是十的倍数,所以这个时候生成随机数好生成,比如说我想生成一个零到290之间的随机数,其实非常简单,我们直接来一个ma点一个random.random它是生成的是零到一之间的随机数啊,不包括零,也不包括一,我让它乘以一个290,本来是零到一嘛,乘以一个二百九就变成了零到290之间,但是还是那句话,也是不包括,诶不包括零,也不包括这个二百九这么一种情况,那现在呢,我可以这样,我可以直接给他来一个这个ma点一个什么呢?诶ma点一个这个,诶这个这个叫做一个run,我给他进行一个四舍五入的一个取整。
18:42
诶,四舍五入取整以后,那它的效果就是既包括零也包括二百九了,这样这样我生成的就是一个零到290之间的一个整数,是这么一个东西,但是问题是我们现在呢,我不是零到290之间,是不是还有什么123456789这些不是十的倍数,这些数呢?而这些数正好是我不想要的,所以这么写啊,不行,这么写不行,那怎么样才能取到整十的倍数呢?哎,那我这样干脆呢,哎,我一不做二不休,我这直接写一个乘以什么呢?乘以29。
19:23
诶,我乘以29,那这样我生成的数字范围是在什么?是在零到29之间啊,零到29之间,或者我干脆写个30也行,30那话就是零到30之间啊,这个无所谓,我们先写29吧,那就表示我生成一个零到29之间的一个数字啊,然后呢,我对这个数字进行四舍五入取整,点round进行四舍五入取整,那这样我们得到的数就是零到29之间的数啊,零到29之间的数包括零也包括29,那你说老师咱们不是说要整十的倍数吗?我再给它整体乘一个十,不管你取的是多少,我给你整体乘一个十,那这个时候你这个数是不是一定是一个十的倍数啊,这样我们这个目的是不是就。
20:13
就达到了,哎,就达到了这么一个效果,或者你说我取30,我取30,你取30的话,你这就别写round了,你写个什么呀,F落干啥呀,向下取整,向下取整那就永远都取不到30,那也是零到29 2029都行啊用F或者是用我们这个round都行啊都行,我们还是用round吧,啊用round啊用round你这就写29了,好,那这样我们就可以直接写一个light,一个这个X。X等于它,然后呢。哎,也不一定X,我们叫一个top吧,诶,Let,一个这个left等于这个东西,我们生成两个随就数,一个作为top值,一个作为left值,然后在这儿我们对它进行赋值,Top不要忘了加单位,加上一个PX,然后诶这就写反了,但是写满了其实也无所谓啊,Life再加上一个PX。
21:06
再加上一个PX,那这样的效果就是什么呀?哎,那这样的效果就是我们每次调用这个食物的坐标都会是一个随机的,每次都是一个不同的坐标啊,不同坐标,好,我们来看一下它的这个效果。哎,这我们怎么看呀,其实就是因为我每一次都掉嘛,你每刷新一次食物的位置就应该是一个,诶一个这个不一样的位置,每刷一新一次就是一个不一样的位置,你看,而且每一次它都是什么呀,在我们这个屏幕里边,或者我也可以在这儿呢,直接给他开一个这个。这给他住了,我直接给他开一个这个我们看一下啊,这个我还开不了,这个我只能先这么用啊,只能先这么用好每一次刷新它的位置都不一样,那就证明我们这个食物的功能就没问题了啊,食物的功能就没问题了,好那这样我们这个实物这个类呢,我们就给它完成了,当然注意啊,主要上边这个类是我们的关键代码,而下边的这个下边这是我们一个测试的啊,测试的它并不是我们的正式代码,待会儿你可以给它,你可以测一下,然后测完了这东西就要删了,没用了啊,它就是一个测试的,好,那这个就是我们说的这个实物这个类,我们就给它处理完了啊,我们还是先停一下,你自己呢来写一下,待会儿我们来接着往下写,写别的类啊,好,停一下。
我来说两句