大鱼在屏幕上乱转

来源:1-3 眨眼睛

慕斯卡1129458

2016-09-29 09:54

http://img.mukewang.com/57ec741f00018df305790061.jpg

是什么原因?代码如下


var babyObj = function()
{
    this.x;
    this.y;
    this.angle;
    this.babyBody = new Image();

    this.babyTailTimer = 0;//记录小鱼尾巴的时针
    this.babyTailCount = 0;//记录执行到哪一桢

    this.babyEyeTimer = 0;
    this.babyEyeCount = 0;
    this.babyEyeInterval = 1000;//时间间隔 这张图片要持续多长时间
}

babyObj.prototype.init = function()
{
    this.x = canWidth * 0.5 - 50;//初始化在屏幕中央
    this.y = canHeight * 0.5 +50;
    this.angle = 0;
    this.babyBody.src = "src/babyFade0.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.98);

    //lerp angle
    var deltaY = mom.y - this.y;
    var deltaX = mom.x - this.x;
    var beta = Math.atan2(deltaY,deltaX) + Math.PI;

    //让小鱼的坐标趋向于鼠标角度
    this.angle = lerpAngle(beta,this.angle,0.5);

    //baby的帧数计数
    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;//自身加1 但不能超过2 所以对2取模 这样会在0到1之间循环
        this.babyEyeTimer %= this.babyEyeInterval;//计时器对当前的时间间隔取模 这样可以清空计时器

        if(this.babyEyeCount == 0)//判断小鱼眼睛在哪一桢是睁眼还是闭眼那一帧
        {//小鱼在闭眼的一帧情况下保留的时间
            this.babyEyeInterval = Math.random() * 1500 +2000;//重新获取一个随机事件(2000到3500之间的随机值)
        }
        else
        {//小鱼睁眼的时间为200毫秒
            this.babyEyeInterval = 200;
        }
    }

    //ctx1
    ctx1.save();
    //translateaby
    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);//使用这一桢的数组中的尾巴图取代babyTailEye变的图

    ctx1.drawImage(this.babyBody,-this.babyBody.width * 0.5,-this.babyBody.height * 0.5);

    var babyEyeCount = this.babyEyeCount;//定义一个临时变量 存储这一桢要用的
    ctx1.drawImage(babyEye[babyEyeCount],-babyEye[babyEyeCount].width * 0.5,-babyEye[babyEyeCount].height * 0.5);

    ctx1.restore();
}

写回答 关注

2回答

  • 失却流年
    2016-10-14 17:51:51

    你的图片资源可能不是最新的,下载最新的图片资源试试

  • MaxJin
    2016-09-30 11:39:22

    你在main.js的主循环估计你写错了


HTML5小游戏---爱心鱼(下)

通过一个清新美好的小游戏教程,熟悉游戏开发流程

46272 学习 · 189 问题

查看课程

相似问题