var babyObj = function()
{
this.x;
this.y;
this.angle;
this.babyTailTimer=0;
this.babyTailCount=0;
this.babyEyeTimer=0;
this.babyEyeCount=0;
this.babyEyeInterval=1000;
this.babyBodyTimer=0;
this.babyBodyCount=0;
}
babyObj.prototype.init = function()
{
this.x=canWidth *0.5 - 50;
this.y=canHeight * 0.5+ 50;
this.angle=0;
}
babyObj.prototype.draw = function()
{
//lerp x,y
this.x = lerpDistance(mom.x, this.x, 0.98);
this.y = lerpDistance(mom.y, this.y, 0.99);
//lerp angle
var deltaY = mom.y - this.y;
var deltaX = mom.x - this.x;
var beta = Math.atan2(deltaY,deltaX);
//lerp angle
this.angle = lerpAngle(beta, this.angle, 0.6);
//baby tail count
this.babyTailTimer +=deltaTime;
if(this.babyTailTimer >50)
{
this.babyTailCount =(this.babyTailCount +1) %8;
this.babyTailTimer %=50;
}
//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.random()*1500+2000;
}else
{
this.babyEyeInterval =200;
}
}
//baby body
this.babyBodyTimer += deltaTime;
if(this.babyBodyTimer > 300)
{
this.babyBodyCount=this.babyBodyCount+1;
this.babyBodyCount %=300;
if(this.babyBodyCount>19)
{
this.babyBodyCount=19;
//game over
}
}
//ctx1
ctx1.save();
//translate
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(babyBody[babyBodyCount],-babyBody[babyBodyCount].width*0.5,-babyBody[babyBodyCount].height*0.5);
var babyEyeCount=this.babyEyeCount;
ctx1.drawImage(babyEye[babyEyeCount],-babyEye[babyEyeCount].width*0.5,-babyEye[babyEyeCount].height*0.5);
ctx1.restore();
}
var can1,can2,ctx1,ctx2;
var lastTime;
var deltaTime;
var bgPic = new Image();
var canWidth,canHeight;
var ane;
var fruit;
var mom;
var baby;
var mx;
var my;
var babyTail=[];
var babyEye=[];
var babyBody=[];
document.body.onload = game;
function game(){
init();
lastTime=Date.now();
deltaTime = 0;
gameloop();
}
function init(){
//获取canvas context
can1=document.getElementById("canvas1");//fishes,dust,ui circle
ctx1=can1.getContext('2d');
can2=document.getElementById("canvas2"); //background,ane,fruits
ctx2=can2.getContext('2d');
can1.addEventListener('mousemove',onMouseMove,false);
bgPic.src = "./src/background.jpg";
canWidth = can1.width;
canHeight = can1.height;
ane = new aneObj();
ane.init();
fruit = new fruitObj();
fruit.init();
mom = new momObj();
mom.init();
baby = new babyObj();
baby.init();
mx=canWidth *0.5;
my=canHeight *0.5;
for(var i=0;i<8;i++)
{
babyTail[i]=new Image();
babyTail[i].src="./src/babyTail" + i + ".png";
}
for(var i=0;i<2;i++)
{
babyEye[i]=new Image();
babyEye[i].src="./src/babyEye" + i + ".png";
}
for(var i=0;i<20;i++)
{
babyBody[i]=new Image();
babyBody[i].src="./src/babyBody" + i + ".png";
}
}
function gameloop(){
window.requestAnimFrame(gameloop);
var now = Date.now();
deltaTime = now - lastTime;
lastTime = now;
if(deltaTime >40) deltaTime =40;
ctx2.drawImage(bgPic,0,0);
drawBackground();
ane.draw();
fruitMonitor();
fruit.draw();
ctx1.clearRect(0,0,canWidth,canHeight);
mom.draw();
momFruitsCollision();
baby.draw();
}
function onMouseMove(e)
{
if(e.offSetX || e.layerX)
{
mx = e.offSetX == undefined ? e.layerX : e.offSetX;
my = e.offSetY == undefined ? e.layerY : e.offSetY;
}
}
解决了,图片是babyFade