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

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

現在，當我在畫布上單擊時，將顯示食物以及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

這是我更新的小提琴 ，現在我將解釋所做的更改。

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. 添加功能以改變食物方向：

    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函數以使其加快速度，或者直接獲取食物（盡管這可能會使動畫看起來很奇怪）。

如果您需要任何新代碼的更多解釋，請留下評論。