這是main .js部分

var?can1;
var?can2;
var?ctx1;
var?ctx2;
var?lasttime;//??????
var?detaltime;//??????
var?canwidth;
var?canheight;
var?bgpic=new?Image();
var?ane;//???ú???????
var?fruit;//???ù??
var?mom;//????
var?mx;??//???x
var?my;??//???y
var?baby;//С??
//小魚
var?babytail=[];
var?babyeye=[];
var?babyfade=[];//小魚身體
//大魚
var?momtail=[];
var?momeye=[];
var?momswim=[];
document.body.onload=game;
function?game(){
????//console.log(aa);
????//???????
????lasttime=Date.now();//?????????
????detaltime=0;
?????init();
????gameloop();
}
function?init(){
????//
????can1=document.getElementById("canvas1");//??????????????????
????can2=document.getElementById("canvas2");//????????
????ctx1=can1.getContext('2d');
????ctx2=can2.getContext('2d');
????can1.addEventListener('mousemove',move,false);
????bgpic.src='background.jpg';
????canwidth=can1.width;
????canheight=can1.height;
????ane=new?aneobj();
????ane.init();
????fruit=new?fruitobj;
????fruit.init();
????mom=new?momobj();
????mom.init();
????mx=canwidth*0.5;
????my=canheight*0.5;
????baby=new?smallfishobj;
????baby.init();
???for(var?i=0;i<8;i++){
??????babytail[i]=new?Image();
??????babytail[i].src="babyTail"+i+".png";
???}
???for(var?i=0;i<2;i++){
??????babyeye[i]=new?Image();
??????babyeye[i].src="babyEye"+i+".png";
???}
???//初始化小魚身體
????for(var?i=0;i<20;i++){
???????babyfade[i]=new?Image();
???????babyfade[i].src='babyFade'+i+'.png';
????}
????for(var?i=0;i<8;i++){
???????momtail[i]=new?Image();
????????momtail[i].src="bigTail"+i+".png";
????}
}
function?gameloop(){
????//?????????
????window.requestAnimationFrame(gameloop);//
????var?now=Date.now();//?????o???????
????detaltime=now-lasttime;//?????????
????lasttime=now;
????if(detaltime>40){
????????detaltime=40;
????}
????drawbackground();
????ane.draw();
????fruit.draw();
????fruitMinter();
????ctx1.clearRect(0,0,canwidth,canheight);
????mom.draw();

????baby.draw();
????mompzfruit();
????mompzbaby();
}
function?move(e){
????if(e.offsetX||?e.layerX){
????????mx=?e.offsetX==undefined??e.layerX:?e.offsetX;
????????my=?e.offsetY==undefined??e.layerY:?e.offsetY;
????}

}

這是 小魚 的baby.js

var?smallfishobj=function(){
??????this.x;
??????this.y;
?????this.angle;
????
????this.babybody=new?Image();??
???this.babytailtimer=0;
???this.babytailcount=0;
//eye?
???this.babyeyetimer=0;
???this.babyeyecount=0;
???this.babyeyeInterval=1000;
???//建立小魚身體相關(guān)的定時(shí)器??動(dòng)畫幀
???this.babybodytimer=0;
???this.babybodycount=0;
};
smallfishobj.prototype.init=function(){
????this.x=canwidth*0.5-50;
????this.y=canheight*0.5+50;
???this.angle=0;
???
????this.babybody.src="babyFade0.png";
????

};
smallfishobj.prototype.draw=function(){
????//????С??????
????this.x=lerpDistance(mom.x,this.x,0.98);
????this.y=lerpDistance(mom.y,this.y,0.98);
????//????С?????
????var?deltay=mom.y-this.y;??//y?????????
????var?deltax=mom.x-this.x;??//x?????????
????var?beta=Math.atan2(deltay,deltax)+Math.PI;?//?????y??
????this.angle=lerpAngle(beta,this.angle,0.6);

???this.babytailtimer+=detaltime;
???if(this.babytailtimer>50){
?????this.babytailcount=(this.babytailcount+1)%8;
?????this.babytailtimer%=50;
???}
???//???????
???this.babyeyetimer+=detaltime;
???if(this.babyeyetimer>this.babyeyeInterval){
??????this.babyeyecount=(this.babyeyecount+1)%2;
??????this.babyeyetimer%=this.babyeyeInterval;
??????if(this.babyeyecount==0){
???????this.babyeyeInterval=Math.random()*1500+2000;
??????}else{
?????????this.babyeyeInterval=200;
??????}
???}
???//實(shí)現(xiàn)小魚身體的互換
???this.babybodytimer+=detaltime;
???if(this.babybodytimer>300){
??????this.babybodycount=this.babybodycount+1;
??????this.babybodytimer%=300;
??????if(this.babybodycount>19){
?????????this.babybodycount=19;
??????}

???}
????ctx1.save();
????ctx1.translate(this.x,this.y);
???ctx1.rotate(this.angle);
???var?babytailcount=this.babytailcount;
????ctx1.drawImage(babytail[babytailcount],-babytail[babytailcount].width*0.5+23,-babytail[babytailcount].height*0.5);
????var?babybodycount=this.babybodycount;
????ctx1.drawImage(babyfade[babybodycount],-babyfade[babybodycount].width*0.5,-babyfade[babybodycount].height*0.5);
???var?babyeyecount=this.babyeyecount;
?????ctx1.drawImage(babyeye[babyeyecount],-babyeye[babyeyecount].width*0.5,-babyeye[babyeyecount].height*0.5);
???ctx1.restore();
???
};