老师,从开头看到现在真的受益良多。我也一直在跟着做,做到这一节《海葵动画》的时候,遇到了一个问题,我不希望这么完美的游戏有一个不完美的结局。。。还希望老师看到之后替我解答一下,真的会不胜感激!
1. 这里是demo 地址: http://www.jzkjarson.com/mobileApp/index.html 2. 我把所有的js都写在了index.js里,但是我的注释都写的很清楚,很好理解。
3. 问题:
我的海葵动画没有生效,就是在indx.js的190行,结束点的横坐标我写了rootx[i],这样能够正确的画出海葵,但是当我加上rootx[i] + l * this.amp[i]的时候,海葵全部消失,并且没有报错。我也调试过了,l和amp[i]的值都没有错。
4.我调试了很久,但是没有找到原因,希望老师看到,能看看我的代码,帮忙调试一下,找到错误原因,在此先多谢老师了!
我也是这个问题!!找了半天没找到什么原因!!!求大家帮忙检查下!!!
var aneObj=function()
{ //start point,control point,end point
this.rootx=[];
this.headx=[];
this.heady=[];
this.alpha=0;
this.amp=[];
}
aneObj.prototype.num=50;
aneObj.prototype.init=function()
{
for(var i=0;i<this.num;i++)
{
this.rootx[i]=i*19+Math.random()*20;
this.headx[i]=this.rootx;
this.heady[i]=canheight-200+Math.random()*50;
this.amp[i]=Math.random()*50+100;
}
}
aneObj.prototype.draw=function()
{
this.alpha+=deltaTime*0.001;
var l=Math.sin(this.alpha);
ctx2.save();
ctx2.globalAlpha=0.5;
ctx2.lineWidth=16;
ctx2.lineCap="round";
ctx2.strokeStyle="#1AE6E6";
for(var i=0;i<this.num;i++)
//beginpath,moveto,lineto,stroke
{ ctx2.beginPath();
ctx2.moveTo(this.rootx[i],canheight);
ctx2.quadraticCurveTo(this.rootx[i],canheight-150,this.headx[i]+l*this.amp[i],this.heady[i]);
ctx2.stroke();
}
ctx2.restore();
}
你的amp没加[i]值吧 我的就是这个问题
你的问题解决了么?我也遇到相同的问题了
建议把老师画贝塞尔曲线的视频再看一遍,我都是跟着老师做,完全正常。说明你肯定是漏了某个细节。