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

雪碧运动风格朝向一个特定点

1 个答案: