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

苏苏7607345 2020-12-05

有没有素材

截图
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采集
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

课后问答： 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采集
qq_神笔马良_0 2016-02-17

qweqweqwe

0赞 · 0采集
此刻雨飘香 2015-12-05

注意baby的书写。不要写成body

0赞 · 0采集
weibo_飞舞的团子_0 2015-12-04

动画帧方案

截图
0赞 · 0采集
椰子树0 2015-11-29

这个原理

0赞 · 0采集
袁龙 2015-10-16

不知道什么东西

截图
0赞 · 1采集

数据加载中...