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

Question

目前我正在制作鱼类动画。我的鱼精灵是动画并能够在画布上自由移动。其次，我想添加食物以在画布上喂食鱼类。但是现在我被卡住了，无法让鱼在画布上画画时游向食物。

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

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; 
    } 
}; 

，现在当我的onclick在画布上，将食物与X和Y偏移量出现一起。

function addFood(foodArray){ 
    var iiimage = new Image(); 
    iiimage.src = 'Images/redFood.png'; 
    for(var m = 0 ; m<foodArray.length;m++){ 
     var x = foodArray[m].x; 
     var y = foodArray[m].y; 
     context.drawImage(iiimage,x,y,50,50); 
    } 
} 

function getMousePos(canvas, evt) { 
     var rect = canvas.getBoundingClientRect(); 
     return { 
      x: evt.clientX - rect.left, 
      y: evt.clientY - rect.top 
     }; 
} 

canvas.onmousedown = function(e){ 
    foodX = getMousePos(canvas,e).x; 
    foodY = getMousePos(canvas,e).y; 
    food = {x:foodX,y:foodY}; 
    foodArray.push(food); 
    console.log('('+foodX+','+foodY+')'); 
    console.log(food); 
    console.log(foodArray.length); 
} 

是否有可能使鱼精灵改变它的方向最近的食物可用，然后返回到它的鱼精灵已与食品接触后随机运动。

这里是我的小提琴：http://jsfiddle.net/Bernard_9/bV4r6/

Answer 1

这里是我的更新fiddle，现在我会解释我所做的更改。

1. 添加变量用于食品的宽度和高度：

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

2. 更新绘制函数使用这些变量：

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

3. 添加功能找到最接近的一块食物：

   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; 
   }; 
   

4. Add功能改变方向朝食品：

   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); 
       } 
   }; 
   

5. 添加变量来跟踪，当鱼是追逐食物：

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

6. 添加一个函数来吃任何食物，鱼下：

   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); 
        } 
       } 
   }; 
   

7. 更新移动功能吃食物，寻找食物和追逐它：

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

8. 更新的变化方向的功能，只改变方向时，不宜追食物：

   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); 
   }; 
   

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

如果您需要关于任何新代码的更多解释，请发表评论。