-
html canvas查看全部
-
学习前提条件查看全部
-
绘制查看全部
-
海葵查看全部
-
思路查看全部
-
2016.6.27 一。新建一个tiny heart的文件夹，在这个文件夹里面再建两个小文件夹src，查看全部
-
js 放JavaScript文件 scr 放图片资源查看全部
-
课程介绍查看全部
-
课程介绍查看全部
-
3-2下期课程简介： 那第二阶段的课程呢，我们其实刚才已经前面讲了，一个是小鱼的动画，小鱼动画跟生命值判断，跟游戏分值的计算，哦，这些都是相关的，是牵扯到游戏结构的一个东西，再就是大鱼去喂小鱼，除了这些之外呢，其他的都是一些渲染性的东西，然后大鱼的动画啊，特效啊，海葵的摆动啊，浮游物啊，这些都是一些血肉的东西，好，那我们下一个阶段的内容看起来不少，但是我们会很快把这些内容掌握，期待大家会继续来学习第二阶段的内容，好，再见，我是Daisy。查看全部
-
大家来看一下它的lerp值，虽然我当时讲的不是非常的详细，但是大家用高中的数学知识，还是没有问题，不过就是一个数学计算的事情，但是还是要计算的精确准确一点，好，这就是大鱼所用到的API，除了这个角度的lerp之外，还有它的位移，我们也用了一个lerp，lerp的好处就是呢，可以使的它的运动会非常的平滑，它的速度回时快时慢，这样看起来会活灵活现，如果它是每一个匀速运动呢，看起来就会非常呆板，我们的数值可能有一点快，现在用录屏软件呢，这个大鱼游的速度算是正常，但是我发现我不开录屏软件的时候大鱼的速度其实是蛮快的，可以去调整这个值让它真好合适，不快不慢，游戏又有难度又不会无聊，大鱼后面我们做了大鱼吃果实的碰撞检测，碰撞检测其实是非常简单的一个碰撞检测，当然碰撞检测的方法又各种各样的，比如说如果是一个方块的检测，那我们应该怎么做？它的外边缘是不规则的，如何来检测，那么技术上就会复杂的多，我们这里做的检测呢，是非常简单的，我们仅仅计算大鱼跟果实之间的距离，这个距离而且我们在计算的时候，是得到了一个距离的平方，为了减小计算量呢，我们只需要得到一个平方值就可以了，它是不是一个准确的值都没有关系，好，绘制小鱼，绘制小鱼的时候跟大鱼是一样的，也会用translate，rotate，还有反正切函数，那我们在这个阶段呢，做的事情呢，其实就是这些，好像我们感觉花了很多的精力，但是做出来的东西还好，同时内容不是特别的多，希望大家能够掌握这些内容，并且在学的过程中呢，能够发现一些乐趣，我们来介绍一下在第二阶段的课程内容查看全部
-
好，接着我们画了大鱼，大鱼的身子，尾巴，眼睛，因为这三部分我们是通过三张图片把它拼起来的，所以我们用到了这些API： translate(); rotate(); Math.atan2(y,x); 如果前两个API如果不用也可以，比如我们用到了这两个API绘画的时候就会更方便，主要是介绍它的坐标的时候会更清晰，哦，我们来看一下， ctx1.save(); ctx1.translate(this.x,this.y); ctx1.rotate(this.angle); ctx1.drawImage(this.bigTail,-this.bigTail.width*0.5+30,-this.bigTail.height*0.5); ctx1.drawImage(this.bigBody,-this.bigBody.width*0.5,-this.bigBody.height*0.5); ctx1.drawImage(this.bigEye,-this.bigEye.width*0.5,-this.bigEye.height*0.5); ctx1.restore(); 同样的在这里，save与restore之间，这些内容才起作用，首先我们通过一个translate把原点移到this.x和this.y的位置，这个时候，我们在计算它的坐标的时候，比方说drawImage里面的第二和第三个参数就非常简单非常容易，我们只需要计算一个位移就可以了，然后我们还做了一个rotate，旋转画布，把当前的画布，以translate中参数为原点，进行旋转，这主要是有利于我们计算角度值，这个角度我们又用到了另外一个非常重要的数学函数，反正切，我们要注意反正切的返回值是-PI到PI之间，所以我们在lerp的时候呢，也进行了一个调整，大家一定要注意查看全部
-
好，第二个步骤是绘制海葵，绘制海葵用到了一些API，我们来看一下这些API，回顾一下我们所写的。尤其是大家要掌握这些API如何来作用于场景， 首先这对API，save和restore我们已经用到了好几次，那就是在这两个API之间的方法或者定义，只作用于它们之间，一旦出了区间范围，这里面的东西就不再起作用了，比如我的lineCap是round等我出去之后，到这底下来，那这个属性就已经消失了，如果在顶上定义lineCap是另外一种类型，那么我restore之后，在这个位置的lineCap的属性就是save之前的属性，那么像这类属性： ctx2.globalAlpha=0.6; ctx2.lineWidth=20; ctx2.lineCap="round"; ctx2.strokeStyle="#3b154e"; 它只需要定义一次就可以了，因为这些都是属于属性类的，而不是命令类，也就是说跟这样的： ctx2.beginPath(); ctx2.moveTo(this.x[i],canHeight); ctx2.lineTo(this.x[i],canHeight-this.len[i]); ctx2.stroke(); 其中的 ctx2.moveTo(this.x[i],canHeight);我要告诉场景到某个位置， ctx2.lineTo(this.x[i],canHeight-this.len[i]);画线段到某个位置， 这一类跟上一类是不一样的，属性哪一类写在for循环外面，定义一次就可以了，但是像这些命令呢，必须写在for循环里面，每一次循环都要执行的，哦，这个是大家要注意的。 画完了海葵，我们画了果实，果实这里面有一个比较重要的概念，那就是池，我们设置了30个果实的池子来一直循环不断的应用这些果实，一旦这个果实离开了屏幕，完成了任务，那把它的状态更改为停滞的状态，然后在这里等待，然后新生的果实有这样的需要的时候，我们就去池子里面找哪一个果实，可以去执行这个任务，我们就把这个任务赋给它，这个概念是比较重要的查看全部
-
3-1，课程总结 到这里呢，我们第一阶段的课程就学完了，之前呢，我们在游戏课程之初的时候，做了一个阶段1和阶段2的任务分配，现在我们做一些调整，之前本来是要把大鱼喂小鱼这个任务放到阶段1的，我们现在把它放到阶段2去，现在看起来阶段2的任务很多，其实后面会很快把这些任务完成掉，阶段1我们总共学了这么多课程，我们来回顾一下，第一个呢画了海葵，海葵产生果实，果实有一个生长然后向上漂浮的过程，最后是大鱼吃果实，另外我们还画了小鱼对不对，我们来具体的看一下，一个步骤一个步骤的看一下，我们都做了哪一些步骤： 第一个我们搭建了html网页结构，绘制背景，到代码中看一下：搭建网页结构的时候呢，css部分大家可以简单回顾一下，css和html标签类的这些内容呢不是我们本身的重点，大家记得在写的时候，要把js脚本包含到html里面来，另外，我们要在canvas上使用场景来绘制要画的东西，那我们很重要的一个就是要从html里面去获取canvas，也就是使用getElementById这个方法来获取canvas 又用getContext获取canvas的场景，同时，大家在这里一定不要忘了getContext('2d')的参数2d，我们之前在写的时候呢，被这个bug困扰了很久，因为忘记了把这个参数写进去，好，这里还有一个小小的知识点呢，就是我们分了两个canvas来绘制内容，因为我们的内容其实还蛮多的，尤其是海葵，它的数量非常多，同时我们还要画那么大的一个背景，如果我们的海葵，像现在，是静止的，海葵是静止不动的，背景也是静止不动的，这种情况下，canvas2只要画一次就可以了，它不需要在循环帧里面，它不需要gameloop来不断刷新，但是我们到第二阶段的时候，实际上是要画一个动态的海葵，这个时候我们就需要刷新了查看全部
-
6，使用lerpAngle使小鱼跟着大鱼旋转 接着，我们让小鱼随着大鱼旋转，让它一直看着鱼妈妈，好，我们再来看一下鱼妈妈的角度的lerp过程，我们是计算了鱼妈妈跟鼠标之间的角度，计算这个角度是用它们之间的坐标差计算的，然后鱼妈妈的角度要趋向于这个角度，然后我们旋转一下画布，ok，让我们写小鱼的lerp angle， 我们直接把它复制过来，这是我常用的方法，相似的东西写两遍是很容易出错的事情，我们需要把相应的东西改一下，小鱼是跟着鱼妈妈走的，好，后面不需要改了，然后小鱼的角度要一直趋向于这个角度，然后呢，小鱼再去旋转画布： 不要忘记给小鱼定义angle属性，并且初始化为0； babyObj.prototype.draw=function(){ //lerp x,y this.x=lerpDistance(mom.x,this.x,0.98); this.y=lerpDistance(mom.y,this.y,0.98); //lerp angle var deltaY=mom.y-this.y; var deltaX=mom.x-this.x; var beta=Math.atan2(deltaY,deltaX)+Math.PI; this.angle=lerpAngle(beta,this.angle,0.6); //ctx1 ctx1.save(); //translate() ctx1.translate(this.x,this.y); ctx1.rotate(this.angle); ctx1.drawImage(this.babyTail,-this.babyTail.width*0.5+23,-this.babyTail.height*0.5); ctx1.drawImage(this.babyBody,-this.babyBody.width*0.5,-this.babyBody.height*0.5); ctx1.drawImage(this.babyEye,-this.babyEye.width*0.5,-this.babyEye.height*0.5); ctx1.restore(); } 好，现在应该是没有问题了，好，刷新一下，现在小鱼已经跟着鱼妈妈跑了，哦，不错，挺好的。查看全部
举报
0/150
提交
取消