精灵朝向一个特定点的运动风格

Question

我的精灵图像将在画布上随机移动。但是在我按下画布后，一个对象会出现，并且精灵图像将以之字形方式向它移动。但我希望精灵直接向对象移动。

我的精灵图像如何移动到我在画布上按下后创建的图像：

Fish.prototype.chaseFood = function(index) {
    if (this.xPos > foodArray[index].x + foodWidth) {
        this.speedX = -1 * Math.abs(this.speedX);
    } else if (this.xPos < foodArray[index].x) {
        this.speedX = Math.abs(this.speedX);
    }
    if (this.yPos > foodArray[index].y + foodHeight) {
        this.speedY = -1 * Math.abs(this.speedY);
    } else if (this.yPos < foodArray[index].y) {
        this.speedY = Math.abs(this.speedY);
    }
};

我知道有一种方法是通过计算精灵点和对象之间的线的斜率来让我的精灵图像移动。但是试了之后还是拿不到。有人知道如何实现吗？

Answer 1

你可以将你的代码更改为以下的chaseFood

Fish.prototype.chaseFood = function (index) {    
    var tx = foodArray[index].x + foodWidth - this.xPos,
        ty = foodArray[index].y + foodHeight - this.yPos,
        dist = Math.sqrt(tx*tx+ty*ty); // better ways to do the distance.

        // 1 can be any speed value to make it go faster or slower
        this.speedX = (tx/dist)*1;
        this.speedY = (ty/dist)*1;
};

它的作用是获取鱼和食物之间的距离，并将当前的 x 和 y 分量除以使其以恒定速度向食物移动的距离。你的总是 1 或 -1，所以它会来回反弹，这种方法允许它是一个浮动，所以它可以准确地向食物移动。

我修改了代码from an article on my blog，它还有其他有用的方法来解决这类问题。

Live Demo