-
- 一只肥鹤 2018-11-02
果实不显示 或 屏幕上果实一直闪烁
问题：长度赋值少了“+”
我写的长度代码this.l[i] = 0.01*deltaTime;（初始长度可能设置的太小所以画面看不到）然后在判断长度是否小于最大值，小于再增大this.l[i] += 0.01*deltaTime;
这样在显示每一帧时果实都会又变成初始最小长度状态然后再增加，这个变化还没有看到就到下一个帧。只能看到刚增大的一小段。所以看起来是闪烁的。与deltaTime的大小设置无关。
- 0赞 · 0采集
-
- 慕粉13132550196 2017-10-20
- 有空闲时间做随机生成水果的去重工作
- 0赞 · 0采集
-
- java家洼 2016-06-23
- 5，给果实动作增加alive限制： 飘出去了我们要做一个判断，飘出去之后，这个果实的使命就已经完成了。它的任务就完成了，所以它 要回到一个待命状态，ok，我们再来做一个检测：如果它的y坐标小于10，它的alive状态 就要变成false，那么只有它的alive状态为true的时候，才做上面这些事情(就是生长，往上漂，并且绘制) 所以我们要在for循环的最顶端加一个条件，如果它的alive状态是true，那么就做这所有的事情(生长，往上漂 并且绘制果实，绘制果实是在gameloop函数中会循环绘制，再有每次绘制果实的参数都是在一定范围内随机的)， 包括alive的检测： fruitObj.prototype.draw=function(){ for(var i=0;i<this.num;i++){ if(this.alive[i]){ if(this.l[i]<=14){ //果实生长时果实长度的变化情况 this.l[i] += this.spd[i]*deltaTime; }else{ //果实往上漂的速度的变化情况 this.y[i] -= this.spd[i]*7*deltaTime; } ctx2.drawImage(this.orange,this.x[i]-this.l[i]*0.5, this.y[i]-this.l[i]*0.5,this.l[i],this.l[i]); if(this.y[i]<10){ this.alive[i]=false; } } } } 刷新浏览器，好的，没有出现bug。
- 0赞 · 1采集
-
- java家洼 2016-06-23
- 4，增加果实速度属性改变果实生长、往上漂动作的速度： 我们给它个性化一下，每一个果实都有它独特的速度，给果实类添加一个属性spd，speed速度。 //果实的速度 this.spd=[]; 这个速度既是果实成长的速度，也是果实往上漂的速度，在init方法里，给果实的速度 初始化一下，给它一个任意值：(其实这里的值并不是任意的，是在前面调整好的值的基础上，将spd做成随机 生成的，但还是在原来测试值的附近波动，其作用就是既能保证每一个果实生长和往上漂的速度不一样，又能 保持原来果实生长和往上漂的速度在一个范围内，不会太快，也不会太慢，总而言之，就是让果实从生长到 往上漂既能不失真又能不拘泥，不死板) init方法： fruitObj.prototype.init=function(){ for(var i=0;i<this.num;i++){ this.alive[i]=true; this.x[i]=0; this.y[i]=0; this.l[i]=0; this.spd[i]=Math.random()*0.01+0.005;//[0.005,0.015) this.born(i); } this.orange.src="./src/fruit.png"; this.blue.src="./src/blue.png"; } draw方法： fruitObj.prototype.draw=function(){ for(var i=0;i<this.num;i++){ if(this.l[i]<=14){ //果实生长时果实长度的变化情况 this.l[i] += this.spd[i]*deltaTime; }else{ //果实往上漂的速度的变化情况 this.y[i] -= this.spd[i]*7*deltaTime; } ctx2.drawImage(this.orange,this.x[i]-this.l[i]*0.5, this.y[i]-this.l[i]*0.5,this.l[i],this.l[i]); } } 刷新浏览器，看一下，现在果实都有各自不同的速度，都飘出去了。
- 0赞 · 1采集
-
- java家洼 2016-06-23
- 3，实现果实往上漂，但是动作都一致，看起来很傻： 往上漂这个原理的本质就是果实的y坐标在逐渐的减小，所以当果实图片的长度大于14的时候 做如下改变： fruitObj.prototype.draw=function(){ for(var i=0;i<this.num;i++){ if(this.l[i]<=14){ this.l[i] += 0.01*deltaTime; }else{ this.y[i] -= 0.01*deltaTime; } ctx2.drawImage(this.orange,this.x[i]-this.l[i]*0.5, this.y[i]-this.l[i]*0.5,this.l[i],this.l[i]); } } 好，我们刷新一下，好，果实在往上漂了对不对，这个速度太小了。作如下改变： fruitObj.prototype.draw=function(){ for(var i=0;i<this.num;i++){ if(this.l[i]<=14){ this.l[i] += 0.01*deltaTime; }else{ this.y[i] -= 0.1*deltaTime; } ctx2.drawImage(this.orange,this.x[i]-this.l[i]*0.5, this.y[i]-this.l[i]*0.5,this.l[i],this.l[i]); } } 恩，这个速度太大了，又做如下改变：0.07 fruitObj.prototype.draw=function(){ for(var i=0;i<this.num;i++){ if(this.l[i]<=14){ this.l[i] += 0.01*deltaTime; }else{ this.y[i] -= 0.07*deltaTime; } ctx2.drawImage(this.orange,this.x[i]-this.l[i]*0.5, this.y[i]-this.l[i]*0.5,this.l[i],this.l[i]); } } 刷新，好，差不多，一直上去了，其实这样子很难看的，果实向上漂的动作都是一致的，看起来很傻。
- 0赞 · 2采集
-
- java家洼 2016-06-23
- 2，通过增约束条件，果实生长不再疯长： 果实现在越来越大。我们需要判断一下： 在draw方法的for循环中做如下改变： fruitObj.prototype.draw=function(){ for(var i=0;i<this.num;i++){ if(this.l[i]<=10){ this.l[i] += 0.01*deltaTime; } ctx2.drawImage(this.orange,this.x[i]-this.l[i]*0.5, this.y[i]-this.l[i]*0.5,this.l[i],this.l[i]); } } 我们再到浏览器中看一下：现在是果实长到一定程度就不长了。再调整一下这个值： 让果实的长度大于14就不再长大了。 fruitObj.prototype.draw=function(){ for(var i=0;i<this.num;i++){ if(this.l[i]<=14){ this.l[i] += 0.01*deltaTime; } ctx2.drawImage(this.orange,this.x[i]-this.l[i]*0.5, this.y[i]-this.l[i]*0.5,this.l[i],this.l[i]); } } 好，大家可以看到果实是慢慢变大，现在已经长成熟了，这个时候它需要往上漂，
- 0赞 · 1采集
-
- java家洼 2016-06-23
- 接下来继续细化果实的状态： 1，果实变的太大，太恐怖： 首先果实出生的时候，是由小慢慢长大的，这个过程我们需要来控制一下，这个原理很简单，是一开始绘图的时候， 绘一个很小的图片，然后慢慢的让这个尺寸加大，我们需要给果实类加一个属性： //果实图片的长度 this.l=[]; l初始化的时候是0， 那么果实在出生的时候长度l也是0；因为即便不是初始化，果实在每次刚出生的时候，这个l也要重置一下， 这个l会随着时间逐渐的增长，在draw方法的for循环中，给l加一个常数0.01：this.l[i] += 0.01; 这里需要调整一下成长的速度，这里也是我们第一次用到这个值deltaTime，deltaTime是什么呢？ 我们前面讲过：就是每两帧之间的时间间隔。它是用来保证游戏里面动作的流畅，连贯，当你用到一个 随时间变化的变量的时候，一定要使用deltaTime使这个过程变得平滑， 在draw方法的for循环中做如下改变： fruitObj.prototype.draw=function(){ for(var i=0;i<this.num;i++){ this.l[i] += 0.01*deltaTime; ctx2.drawImage(this.orange,this.x[i]-this.l[i]*0.5, this.y[i]-this.l[i]*0.5,this.l[i],this.l[i]); } } 其中drawImage方法的第4个参数和第5个参数是规定绘制这个图片的尺寸。 在浏览器中刷新一下，可以看到果实在慢慢长大，不过挺恐怖的，它现在越来越大。我们需要判断一下：
- 1赞 · 2采集
-
- qqwww 2016-02-23
- 使用datatime使得帧与帧之间的动画连贯
- 0赞 · 0采集
-
- qq_慕姐5109078 2015-11-14
- deltaTime使动画平滑
-
截图0赞 · 0采集
-
- move132 2015-10-01
- 不错
-
截图0赞 · 2采集
数据加载中...