var babyObj = function()
{
this.x;
this.y;
this.babyAngle;
this.babyEye = new Image();
this.babyBody = new Image();
this.babyTail = new Image();
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.babyAngle = 0;
//this.babyEye.src = "./src/bigEye0.png";
this.babyBody.src = "./src/babyFade0.png";
//this.babyTail.src = "./src/babyTail0.png";
}
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 angel
var deltaY = mom.y - this.y;
var deltaX = mom.x - this.x;
var beta = Math.atan2(deltaY, deltaX) + Math.PI;//-PI , PI
//lerp angle
this.babyAngle = lerpAngle(beta, this.babyAngle, 0.6); //计算出鱼与鼠标角度
//baby tail count
//this.babyTailTimer += deltaTime;
this.babyTailTimer += 17;
if(this.babyTailTimer > 50)
{
this.babyTailCount = (this.babyTailCount + 1) % 8;
this.babyTailTimer %= 50;
}
//baby eye
this.babyEyeTimer += 17 ;
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 += 17;
if(this.babyBodyTimer > 300)
{
this.babyBodyCount = this.babyBodyCount +1 ;
this.babyBodyTimer %= 300; //让小鱼匀速地变白,防止小鱼快速变白
if(this.babyBodyCount > 19 )
{
this.babyBodyCount = 19;
data.gameOver = true;
// game over
}
}
//console.log(deltaTime);
//console.log(this.babyTailCount);
//ctx1
ctx1.save();
//translate()
ctx1.translate(this.x, this.y); //把鼠标原点移到x,y位置
ctx1.rotate(this.babyAngle); //鱼跟随大鱼转动
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();
}
大鱼吃小鱼游戏-baby.js
最新推荐文章于 2015-11-30 19:42:29 发布
本文介绍了一种使用JavaScript实现的小鱼动画绘制方法。通过不断更新小鱼的位置、角度及身体透明度等属性,实现了小鱼跟随鼠标移动的效果,并且加入了尾巴摆动、眨眼等细节动画。文章详细解释了如何计算小鱼朝向的角度以及如何平滑过渡到目标位置。
1167

被折叠的 条评论
为什么被折叠?



