Javascript 将精灵图像移动到选定位置

目前我正在制作一个鱼类动画。我的鱼精灵是动画，能够在画布上自由移动。第二，我想给画布上的鱼添加食物。但是现在我被卡住了，当食物在画布上画的时候，我无法让鱼游向食物

下面是我的鱼精灵是如何随机移动的：

Fish.prototype.changeDirection = function () {
    var me = this;
    var speedXSign = Math.random() < 0.5 ? 1 : -1;
    var speedYSign = Math.random() < 0.5 ? 1 : -1;
    this.speedX = speedXSign * (1 + Math.random() * 1.6);
    this.speedY = speedYSign * (1 + Math.random() * 1.6);
    var time = 1000 + 2000*Math.random();
    setTimeout(function() {me.changeDirection()}, time);
};

Fish.prototype.move = function () {
    this.animIndex++;
    if ( this.animIndex == animFrames.length) this.animIndex = 0;

    this.xPos += this.speedX;
    if ((this.xPos + this.frameWidth * this.frameScale / 1.8) >= canvas.width && this.speedX > 0 || 
    (this.xPos - this.frameWidth * this.frameScale / 1.8) <= 0 && this.speedX <= 0) {
        this.speedX = -this.speedX;
    }

    this.yPos += this.speedY;
    if ((this.yPos + this.frameHeight * this.frameScale / 1.8) >= canvas.height && this.speedY > 0 || 
    (this.yPos - this.frameHeight * this.frameScale / 1.8) <= 0 && this.speedY <= 0) {
        this.speedY = -this.speedY;
    }
};

Fish.prototype.changeDirection=函数（）{
var me=这个；
var speedXSign=Math.random（）<0.5？1:-1；
var speedYSign=Math.random（）<0.5？1:-1；
this.speedX=speedXSign*（1+Math.random（）*1.6）；
this.speedY=speedYSign*（1+Math.random（）*1.6）；
var time=1000+2000*Math.random（）；
setTimeout（函数（）{me.changeDirection（）}，时间）；
};
Fish.prototype.move=函数（）{
这个.animIndex++；
如果（this.animIndex==animFrames.length）this.animIndex=0；
this.xPos+=this.speedX；
如果（（this.xPos+this.frameWidth*this.frameScale/1.8）>=canvas.width&&this.speedX>0 | |
（this.xPos-this.frameWidth*this.frameScale/1.8）0 |
（this.yPos-this.frameHeight*this.frameScale/1.8）这是我的更新，现在我将解释我所做的更改

添加食物宽度和高度的变量：

...
var foodArray = [];
var foodWidth = 50;
var foodHeight = 50;
var food;
...


更新draw函数以使用这些变量：

function addFood(foodArray) {
  ...
    var x = foodArray[m].x;
    var y = foodArray[m].y;
    context.drawImage(iiimage, x, y, foodWidth, foodHeight);
  ...
}


添加查找最近食物的功能：

Fish.prototype.closestFood = function () {
var closestFoodIndex = -1;
var shortestDistance = Infinity;
for (var i = 0; i < foodArray.length; i++) {
        var distance = Math.max(Math.abs(this.xPos - foodArray[i].x), Math.abs(this.yPos - foodArray[i].y));
        if (distance < shortestDistance) {
            shortestDistance = distance;
            closestFoodIndex = i;
        }
    }
    return closestFoodIndex;
};


添加一个功能，可以吃鱼下面的任何食物：

Fish.prototype.eatFood = function() {
    var foodX, foodY;
    var halfWidth = this.frameWidth * this.frameScale / 2;
    var halfHeight = this.frameHeight * this.frameScale / 2;
    // Loop backward because we are removing elements.
    for (var i = foodArray.length-1; i >= 0; i--) {
        foodX = foodArray[i].x + foodWidth / 2;
        foodY = foodArray[i].y + foodHeight / 2;
        if (foodX > this.xPos - halfWidth &&
            foodX < this.xPos + halfWidth &&
            foodY > this.yPos - halfHeight&&
            foodY < this.yPos + halfHeight)
        {
            foodArray.splice(i, 1);
        }
    }
};


更新“更改方向”功能，仅在不追逐食物时更改方向：

function Fish(xPos, yPos, speedX, speedY, imgFish, frameWidth, frameHeight) {
    ...
    this.chasingFood = false;
    ...
}

Fish.prototype.changeDirection = function () {
    var me = this;
    if (!this.chasingFood) {
        var speedXSign = Math.random() < 0.5 ? 1 : -1;
        var speedYSign = Math.random() < 0.5 ? 1 : -1;
        this.speedX = speedXSign * (1 + Math.random() * 1.6);
        this.speedY = speedYSign * (1 + Math.random() * 1.6);
    }
    var time = 1000 + 2000 * Math.random();
    setTimeout(function () {
        me.changeDirection();
    }, time);
};

Fish.prototype.changeDirection=函数（）{
var me=这个；
如果（！这个。查辛食品）{
var speedXSign=Math.random（）<0.5？1:-1；
var speedYSign=Math.random（）<0.5？1:-1；
this.speedX=speedXSign*（1+Math.random（）*1.6）；
this.speedY=speedYSign*（1+Math.random（）*1.6）；
}
var time=1000+2000*Math.random（）；
setTimeout（函数（）{
我。改变方向（）；
}，时间）；
};

这只会使鱼改变x和y方向，而不会改变速度。可以修改chaseFood功能使其加快速度，或者直接吃食物（尽管这可能会使动画看起来很奇怪）

如果您需要对任何新代码进行更多解释，请留下评论。
是的，在Windows和Ubuntu上使用Chrome对我来说效果很好。我可以再问您一个问题吗？是否可以在画布上放置一个按钮来启用/禁用馈送？@Jaredneil本人从未这样做过，但似乎它可以回答您的问题。
Fish.prototype.eatFood = function() {
    var foodX, foodY;
    var halfWidth = this.frameWidth * this.frameScale / 2;
    var halfHeight = this.frameHeight * this.frameScale / 2;
    // Loop backward because we are removing elements.
    for (var i = foodArray.length-1; i >= 0; i--) {
        foodX = foodArray[i].x + foodWidth / 2;
        foodY = foodArray[i].y + foodHeight / 2;
        if (foodX > this.xPos - halfWidth &&
            foodX < this.xPos + halfWidth &&
            foodY > this.yPos - halfHeight&&
            foodY < this.yPos + halfHeight)
        {
            foodArray.splice(i, 1);
        }
    }
};

Fish.prototype.move = function () {
    ...
    this.eatFood();

    var closestFoodIndex = this.closestFood();
    if (closestFoodIndex >= 0) {
        this.chasingFood = true;
        this.chaseFood(closestFoodIndex);
    } else {
        this.chaseingFood = false;
    }
    ...
};

Fish.prototype.changeDirection = function () {
    var me = this;
    if (!this.chasingFood) {
        var speedXSign = Math.random() < 0.5 ? 1 : -1;
        var speedYSign = Math.random() < 0.5 ? 1 : -1;
        this.speedX = speedXSign * (1 + Math.random() * 1.6);
        this.speedY = speedYSign * (1 + Math.random() * 1.6);
    }
    var time = 1000 + 2000 * Math.random();
    setTimeout(function () {
        me.changeDirection();
    }, time);
};