將精靈圖像移動到選定位置

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功能可以被修改以加快速度，也可以直接進入食物（儘管這可能會使動畫看起來很奇怪）。

如果您需要關於任何新代碼的更多解釋，請發表評論。