HTML5小游戏---爱心鱼（下）_技术笔记

论斤烤 2020-12-20

课程结构：大鱼吃果实特效

截图
0赞 · 0采集
苏苏7607345 2020-12-05

有没有素材

截图
0赞 · 0采集
甜甜6976717 2020-09-04

html

0赞 · 0采集
独奏的幸福 2018-11-30

二次贝塞尔曲线，制作摇摆的海葵

截图
0赞 · 0采集
qq_曼陀罗花开_0 2017-12-26

没几个人能坚持到这里，所以没有笔记，自己学吧

0赞 · 0采集
前端小嘿嘿 2017-12-16

竟然没人啊

0赞 · 0采集
前端小嘿嘿 2017-12-13

竟然没有笔记

0赞 · 0采集
qq_波子_1 2017-10-23

阔以

0赞 · 0采集
卡牌大师周润发 2017-06-08

ctx1.save();ctx1.restore();使这这对API中间的样式只作用于这段内容

1赞 · 0采集
慕田峪7461845 2017-05-02

游戏

截图
0赞 · 1采集
慕粉18272922592 2017-03-13

。。

截图
0赞 · 0采集
ChristineN 2017-02-03

物体池的作用即时销毁, 也就是变量不再使用的时候, 会立即别销毁, 是一个非常重要的需求. JavaScript内置的自动清理几乎成为JavaScript语言的传统, 但是, 我们还是有很多需求, 就是希望大量的内存被即时的释放. for(var i=0;i<0x1000000;i++){ var obj = new SomeThing(); obj.doSomeThing(); } 这种情况下, 大量的对象被创建, 但是直到达到临界点, 垃圾收集器才会清理一下内存, 但是实际上, 在C++语言中, 销毁obj对象不需要任何的额外开销, 因为obj在栈上, 它压根就不需要销毁, 实际上只有一个obj对象. 而JavaScript不断的创建大量新对象的确是非常的"愚蠢", 甚至引擎优化上也没有采用什么机制, 能够把大量无用的obj高效的销毁.

1赞 · 1采集
梧桐呓语 2017-01-20

如何排除bug！

0赞 · 0采集
ChristineN 2017-01-05

设计思路

截图
0赞 · 0采集
周34 2017-01-04

rrrrrrr

截图
0赞 · 0采集
ChristineN 2017-01-03

this.babyTailCount=(this.babyTailCount+1)%8; this.babyTailTimer%=50; %取模为了防止越界，如果=25，25%50=25，如果50，50%50=0就相当于归零操作，重新计时，babyTailCount同理，babyTailCount如果=6,6%8=6，如果=8，8%8=0，就重新开始第一张图

1赞 · 0采集
撕烤兔 2016-12-11

收获： 1、lerp 2、document.onload -> game -> gameloop 3、requestAnimFrame 及兼容处理方法 window.requestAnimFram = (function(){...})(); 4、海葵！贝塞尔曲线

0赞 · 0采集
qq__3854 2016-11-09

第一天开始听课

0赞 · 0采集
源哥如是说 2016-10-07

兴趣1

0赞 · 0采集
UFO2015 2016-07-12

<script> babyTail = new Image(); for (var i = 0; i < 8; i++) { babyTail[i] = new Image(); babyTail[i].src = "./src/images/babyTail"+i+".png"; } </script>

截图
0赞 · 0采集
java家洼 2016-06-25

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，到浏览器看效果：大鱼没吃到果实，没有能量给小鱼，小鱼身体应该不会变红，因为大鱼的动画还没有加上去，包括分值的计算也没有加上去，我们先把这个功能放着，下一个任务是做大鱼的动画。

2赞 · 1采集
java家洼 2016-06-25

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 的显示到后面再做。大鱼喂小鱼的核心机制是：首先大鱼必须吃到果实，在小鱼完全变白之前，大鱼喂小鱼，使得小鱼身体重新变红，接下来做大鱼喂小鱼的逻辑判断

3赞 · 2采集
java家洼 2016-06-25

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();

2赞 · 0采集
java家洼 2016-06-25

课后问答： 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，就重新开始第一张图

0赞 · 0采集
java家洼 2016-06-25

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"; 好，我们回到浏览器中来看一下我们做的对不对，大家可以看到小鱼的尾巴已经一摇一摆的动起来了，好，非常成功，接下来我们第二个工作，就是绘制小鱼眨眼睛的动作，我们来看一下图片资源，小鱼的眼睛有两个状态，一个是圆睁着，第二个就是眯起来，来表示这样一个眨眼睛的动作

0赞 · 0采集
java家洼 2016-06-25

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; }

0赞 · 0采集
java家洼 2016-06-25

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这个数组里面了。

0赞 · 0采集
java家洼 2016-06-25

另外呢，大鱼喂小鱼，大鱼吃到多少果实，可以喂给小鱼，给它补充多少能量，这个就是游戏分数的计算，这是第二部分，那么第三部分呢，就是让游戏内容显得更丰富的工作，比如说大鱼在喂小鱼的时候，会有一个特效，来表示这个动作，小鱼得到果实的时候，得到能量是一种很快乐的表现，另外呢，深海里面会有一些漂浮物，它会来渲染深海的这种感觉，这就是第三部分，好，我们一个接一个的来把这些工作完成，那么第一个我们来做小鱼的动画，小鱼动画包括三个部分，一个是它尾巴要摆动，眼睛要时不时的眨一下眼睛，另外呢它如果得不到能量的话，身体会慢慢变白，从而game over 好，我们一个接一个的做，首先是把尾巴的动画加上去，我们来看一下我们的图片资源，小鱼尾巴是从babyTail0到babyTail7，一共是八张图片，这个就是一个序列帧，我们要做的就是，把这个序列帧在游戏里面进行轮播，这样就会成为一个动画了，好，我们就来做这个工作

2赞 · 0采集
java家洼 2016-06-25

爱心鱼下： 1-1：欢迎大家回到fish game一个关于小鱼的游戏，我是Daisy，那我们在第一阶段已经做了一些工作，现在我们再来回顾一下，在第一阶段做的内容，其中我们绘制了游戏的背景，是蓝色的海洋，海洋里面有一些海葵，游戏的主角是大鱼跟小鱼，鱼妈妈带着一个鱼宝宝，鱼宝宝可以跟随着鱼妈妈来游动，同时呢海葵可以产生一些果实，这些果实是大鱼的能量，大鱼就去捕捉这些果实，同时把它的能量喂给小鱼，在这个游戏中呢，这些呢是第一阶段做的内容，现在呢，我们到第二阶段，第二阶段我们会做哪一些内容呢？嗯，我们来看一下，第二阶段的大纲：第二阶段我们会在前面的基础上把剩余的功能补充上，可以划分为3类吧。一类工作是动画，比方说小鱼的动画，现在小鱼跟大鱼都没有任何的动画，小鱼的眼睛也不动，尾巴也不动，那我们在第二个阶段会让它的眼睛眨动起来，尾巴摇起来，包括鱼妈妈也是，另外作为游戏死亡的判断，game over 的判断，小鱼会有一定的反应，如果鱼妈妈不能够及时的给小鱼补充能量的话，那么小鱼的身体就会由现在的橙黄色慢慢的变成白色，来表示game over ，同时大鱼在吃到果实的时候，也会有动画的表示，比方说它吃到一个果实，它会有什么样的变化，它吃到很多果实之后，玩家如何知道这个效果，知道这个事情，这个是通过大鱼的动画来表现的，另外呢，里面的海葵，现在是不动的，我们会让它摇动起来，像在深海里面那样缓慢的左右摇摆一样，这一部分就是动画的内容，另外呢，还有一部分是数值判断，比方说小鱼的生命值判断，这个关系到game over 的判断

2赞 · 0采集
EyreSS 2016-05-13

特效集

截图
0赞 · 0采集

数据加载中...