[英]Moving sprite image to selected position
目前,我正在制作鱼动画。 我的鱼精灵具有动画效果,能够在画布上自由移动。 其次,我想添加食物以喂食画布上的鱼。 但是目前,我被卡住了,当它们在画布上画画时,它们无法让鱼游向食物。
这是我的鱼精灵随机移动的方式:
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/
这是我更新的小提琴 ,现在我将解释所做的更改。
添加食物宽度和高度的变量:
... var foodArray = []; var foodWidth = 50; var foodHeight = 50; var food; ...
更新绘图函数以使用这些变量:
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.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); } };
添加变量以跟踪鱼何时追逐食物:
function Fish(xPos, yPos, speedX, speedY, imgFish, frameWidth, frameHeight) { ... this.chasingFood = false; ... }
添加一个功能来吃鱼下面的任何食物:
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); };
这只会使鱼改变x和y方向,而不会改变速度。 可以修改chaseFood函数以使其加快速度,或者直接获取食物(尽管这可能会使动画看起来很奇怪)。
如果您需要任何新代码的更多解释,请留下评论。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.