鱼移到左上角,不会跟着鼠标动,求解答,代码如下:

来源:2-8 大鱼随鼠标移动

ifornot

2016-09-21 11:38

momObj.prototype.init = function()

{

this.x = canWidth * 0.5;

this.y = canHeight * 0.5;

this.angle = 0;

this.bigEye.src = "./src/bigEye0.png" ;

this.bigBody.src = "./src/bigSwim0.png" ;

this.bigTail.src =  "./src/bigTail0.png" ;

}

momObj.prototype.draw = function()

{

//lerp x,y

this.x = lerpDistance(mx, this.x, 0.98);    //让大鱼的坐标一直趋向于鼠标的坐标

this.y = lerpDistance(my, this.y, 0.98);

//delta angle(角度差)

//Math.atan2(x,y)

var deltaY = my - this.y;

var deltaX = mx - this.x;

var beta = Math.atan2(deltaY ,deltaX);//返回值是[-PI,PI]


this.angle = lerpAngle(beta, this.angle, 0.6); 


ctx1.save();

ctx1.translate(this.x,this.y);  //大鱼的相对原点

ctx1.rotate(this.angle);    //旋转画布

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

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

ctx1.drawImage(this.bigTail, -this.bigTail.width * 0.5 + 30, -this.bigTail.height * 0.5);

ctx1.restore();

}


写回答 关注

2回答

  • 慕妹5034279
    2018-08-08 09:49:52

    什么问题?

  • ifornot
    2016-09-21 11:44:18

    main.js

    //初始化部分

    mom = new momObj();

    mom.init();

    mx = canWidth * 0.5;

    my = canHeight * 0.5;

    //循环部分

    ctx1.clearRect(0,0,canWidth,canHeight); //ctx1每一帧的都要清除掉,不然会被覆盖,使画的图形变粗

    mom.draw();

    function onMouseMove(e)   

    {

    if (e.offSetX || e.layerX)   

    {

    mx = e.offSetX == undefined ? e.offSetX : e.layerX;

    my = e.offSetY == undefined ? e.offSetY : e.layerY;

    //console.log(mx);

    }

    }


    慕粉4249... 回复星空下的小孩

    怎么回事我也是

    2017-07-25 20:55:20

    共 7 条回复 >

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

学做HTML5游戏,轻轻松松带你上手,适合刚入手游戏开发的同学

92348 学习 · 551 问题

查看课程

相似问题