-
2-1：大鱼喂小鱼： 大鱼喂小鱼的逻辑和之前的大鱼吃果实的逻辑是一样的， 在collision.js文件中： 添加如下代码： //mom baby collision function momBabyCollision(){ var l=calLength2(mom.x,mom.y,baby.x,baby.y); if(l<900){ baby.babyBodyCount=0; } } 并且将momBabyCollision()放在主循环gameloop中，放在momFruitsCollision();之后。然后把baby.draw();放在mom.draw();之后 刷新是F5，到浏览器看效果：大鱼没吃到果实，没有能量给小鱼，小鱼身体应该不会变红，因为大鱼的动画还没有加上去，包括分值的计算也没有加上去，我们先把这个功能放着，下一个任务是做大鱼的动画。查看全部
-
1-4 身体变白 身体变白是大鱼不能及时把能量传递给小鱼，小鱼表现出的动画，身体变白通过序列帧完成，原理同尾巴，但是身体变白是个有去无回的过程，当小鱼身体完全变白，表示gameover 在main.js中： //小鱼身体图片数组 var babyBody=[]; for(var i=0;i<20;i++){ babyBody[i]=new Image(); babyBody[i].src="./src/babyFade"+i+".png"; } 在baby.js中： baby类定义中： this.babyBodyTimer=0; this.babyBodyCount=0; draw方法中： //baby body this.babyBodyTimer += deltaTime; if(this.babyBodyTimer>300){ this.babyBodyCount = this.babyBodyCount+1; this.babyBodyTimer %=300; if(this.babyBodyCount > 19){ this.babyBodyCount=19; //game over } } var babyBodyCount=this.babyBodyCount; ctx1.drawImage(babyBody[babyBodyCount],-babyBody[babyBodyCount].width*0.5, -babyBody[babyBodyCount].height*0.5); 同时删除之前定义的this.babyBody=new Image(); game over 的显示到后面再做。 大鱼喂小鱼的核心机制是：首先大鱼必须吃到果实，在小鱼完全变白之前，大鱼喂小鱼，使得小鱼身体重新变红，接下来做大鱼喂小鱼的逻辑判断查看全部
-
1-3 眨眼睛 小鱼眼睛眨动的这个动作，跟小鱼尾巴的这个动作有些不同，小鱼的尾巴是匀速播放序列帧，小鱼眼睛是每隔2-3秒眨一下，把眨眼睛间隔设置成随机的，不死板，更灵活，小鱼眯眼睛时间长度是固定的， 1，在main.js中定义小鱼眼睛图片数组： //小鱼眼睛图片数组 var babyEye=[]; for(var i=0;i<2;i++){ babyEye[i]=new Image(); babyEye[i].src="./src/babyEye"+i+".png"; } 在baby类里面： 定义定时器，序列号变量，图片间隔变量babyEyeInterval表示图片持续多长时间，比如：圆睁眼睛图片播放2秒，切换到眯眼睛图片，持续200ms，再切换到圆睁眼睛图片，播放3秒...一直这样子循环。 //baby eye this.babyEyeTimer += deltaTime; if(this.babyEyeTimer>this.babyEyeInterval){ this.babyEyeCount = (this.babyEyeCount+1)%2; this.babyEyeTimer %= this.babyEyeInterval; if(this.babyEyeCount == 0){ this.babyEyeInterval=Math.randon()*1500+2000;//[2000,3500) }else{ this.babyEyeInterval=200; } } var babyEyeCount=this.babyEyeCount; ctx1.drawImage(babyEye[babyEyeCount],-babyEye[babyEyeCount].width*0.5, -babyEye[babyEyeCount].height*0.5); 同时删除掉之前定义的this.babyEye=new Image();查看全部
-
课后问答： 1问： baby.js和main.js里babyTail的区别 问一下为什么不能直接在baby.js里定义babyTail[]呢。在main里再调用不行吗？还是也可以啊 答： 应该是也可以，放在main.js中是作为全局变量的，放在baby.js 中是作为baby的一个属性来使用的baby.babyTail[babyTailCount] 2问： 小鱼尾巴问题 this.babyTailCount=(this.babyTailCount+1)%8; this.babyTailTimer%=50; 这两个为什么要这么写 能再讲清楚一点吗 答： 因为鱼尾巴的图片就是用数组保存的，%操作是为了防止图片越界，就想babyTailTimer如果=60，60%50=10，就相当于归零操作，重新计时，babyTailCount是一样的，总共七张图，一直+1，babyTailCount如果=6 6%8=6，没有影响，但是8%8=0，就重新开始第一张图查看全部
-
3，实现小鱼尾巴摆动效果 我们再看这里： ctx1.drawImage(this.babyTail,-this.babyTail.width*0.5+23,-this.babyTail.height*0.5); 在绘制小鱼尾巴图片的时候，我们就不是再绘制这一张图片了，而是绘制我们之前定义的babyTail这个图片数组，好，我们把它赋值过来，我们要告诉它执行到第几帧了，第几帧实际上是我们之前定义的这个变量 babyTailCount 我们在这里定义一个临时变量，var babyTailCount=this.babyTailCount; 我们希望它来绘制这一帧，同时我们把后面的图片也替换一下， var babyTailCount=this.babyTailCount; ctx1.drawImage(babyTail[babyTailCount], -babyTail[babyTailCount].width*0.5+23, -babyTail[babyTailCount].height*0.5); 好，这样的话呢，小鱼的尾巴就应该可以摆动起来了。我们把之前定义的这个变量删除掉： this.babyTail.src="./src/babyTail0.png"; 好，我们回到浏览器中来看一下我们做的对不对，大家可以看到小鱼的尾巴已经一摇一摆的动起来了，好，非常成功，接下来我们第二个工作，就是绘制小鱼眨眼睛的动作，我们来看一下图片资源，小鱼的眼睛有两个状态，一个是圆睁着，第二个就是眯起来，来表示这样一个眨眼睛的动作查看全部
-
2，定义计时器变量和小鱼尾巴图片序号变量，并且设定计时器和序号变量的规则。 接着我们就要来设计计时器，也就是说要有一个时钟，来控制每个一段时间，来提醒我们要执行下一个动画图片了，首先我们要定义两个变量，一个变量是计时器，this.babyTailTimer=0;另外一个就是记录当前图片序号的变量，也就是现在执行到哪一帧了，我们让它从第0帧开始执行，this.babyTailCount=0;然后我们在draw循环中，因为这个draw循环是在gameloop里面，每一帧都会执行的，我们希望每一帧计时器都会工作，在这里写babyTail的计数工作，计时器需要累加时间，之前我们定义了一个变量，就是deltaTime，deltaTime记录的就是相邻的两帧之间的时间间隔，如果这个计时器超过了50ms，这个时候就要提醒我们需要执行下一帧了，babyTailCount需要加1，那么我们来让它自身来加1，但是我们又不希望它超过7，我们希望它是0到7之间的循环，这个时候我们让它对8取模，这样子这个变量就会一直0到7,0到7这样子来循环了，当然它每加一帧的时候，我们需要把这个计时器复原，babyTailTimer对50取模，这样就完成了babyTail计数的工作： //baby tail count this.babyTailTimer += deltaTime; if(this.babyTailTimer>50){ this.babyTailCount = (this.babyTailCount+1)%8; this.babyTailTimer %= 50; }查看全部
-
1-2 鱼尾巴摆动： 1，定义小鱼尾巴的图片数组， 请大家想这样一个问题：我们如何表现小鱼尾巴摇动这个动画呢？这个动画是通过序列帧来表示的，有0到7这个序列帧，那我们怎么把它表现在游戏里面，哦，这个非常简单，这个原理就是每隔固定的时间，让它执行下一个图片，哦，绘制下一个图片，然后，这个连续起来呢就成了一个动画，所以首先我们需要一个数组，图片的数组，把这8张图片放在数组中，同时设计一个计时器，让这个计时器能够每隔一段时间来提醒要绘制下一张图片了，这样子，一直来循环，就成为一个动画序列，好，我们回到编辑器中，首先我们先定义一个小鱼尾巴的图片数组，var babyTail=[];这个数组呢，我们初始化为图片，在init函数中，总共有八张图片， 那我们对每一张都来初始化一下： for(var i=0;i<8;i++){ babyTail[i]=new Image(); babyTail[i].src="./src/babyTail"+i+".png"; } 这样我们就把小鱼尾巴的序列帧放在babyTail这个数组里面了。查看全部
-
另外呢，大鱼喂小鱼，大鱼吃到多少果实，可以喂给小鱼，给它补充多少能量，这个就是游戏分数的计算，这是第二部分，那么第三部分呢，就是让游戏内容显得更丰富的工作，比如说大鱼在喂小鱼的时候，会有一个特效，来表示这个动作，小鱼得到果实的时候，得到能量是一种很快乐的表现，另外呢，深海里面会有一些漂浮物，它会来渲染深海的这种感觉，这就是第三部分，好，我们一个接一个的来把这些工作完成，那么第一个我们来做小鱼的动画，小鱼动画包括三个部分，一个是它尾巴要摆动，眼睛要时不时的眨一下眼睛，另外呢它如果得不到能量的话，身体会慢慢变白，从而game over 好，我们一个接一个的做，首先是把尾巴的动画加上去，我们来看一下我们的图片资源，小鱼尾巴是从babyTail0到babyTail7，一共是八张图片，这个就是一个序列帧，我们要做的就是，把这个序列帧在游戏里面进行轮播，这样就会成为一个动画了，好，我们就来做这个工作查看全部
-
爱心鱼 下： 1-1： 欢迎大家回到fish game一个关于小鱼的游戏，我是Daisy，那我们在第一阶段已经做了一些工作，现在我们再来回顾一下，在第一阶段做的内容，其中我们绘制了游戏的背景，是蓝色的海洋，海洋里面有一些海葵，游戏的主角是大鱼跟小鱼，鱼妈妈带着一个鱼宝宝，鱼宝宝可以跟随着鱼妈妈来游动，同时呢海葵可以产生一些果实，这些果实是大鱼的能量，大鱼就去捕捉这些果实，同时把它的能量喂给小鱼，在这个游戏中呢，这些呢是第一阶段做的内容，现在呢，我们到第二阶段，第二阶段我们会做哪一些内容呢？嗯，我们来看一下，第二阶段的大纲：第二阶段我们会在前面的基础上把剩余的功能补充上，可以划分为3类吧。一类工作是动画，比方说小鱼的动画，现在小鱼跟大鱼都没有任何的动画，小鱼的眼睛也不动，尾巴也不动，那我们在第二个阶段会让它的眼睛眨动起来，尾巴摇起来，包括鱼妈妈也是，另外作为游戏死亡的判断，game over 的判断，小鱼会有一定的反应，如果鱼妈妈不能够及时的给小鱼补充能量的话，那么小鱼的身体就会由现在的橙黄色慢慢的变成白色，来表示game over ，同时大鱼在吃到果实的时候，也会有动画的表示，比方说它吃到一个果实，它会有什么样的变化，它吃到很多果实之后，玩家如何知道这个效果，知道这个事情，这个是通过大鱼的动画来表现的，另外呢，里面的海葵，现在是不动的，我们会让它摇动起来，像在深海里面那样缓慢的左右摇摆一样，这一部分就是动画的内容，另外呢，还有一部分是数值判断，比方说小鱼的生命值判断，这个关系到game over 的判断查看全部
-
特效集查看全部
-
游戏分值计算查看全部
-
碰撞检测查看全部
-
动画效果查看全部
-
漂浮物查看全部
-
二次贝塞尔3查看全部
举报
0/150
提交
取消