目前，当我的精灵在画布上移动时，只有在碰到画布的侧面后才会反弹。有没有办法让我的精灵在画布上的随机位置改变到另一个方向？
这是我更改方向及其移动方式的代码：
Fish.prototype.changeDirection = function () {
speedXSign = this.speedX > 0 ? 1 : -1;
speedYSign = this.speedY > 0 ? 1 : -1;
this.speedX = speedXSign * (1 + Math.random() * 2);
this.speedY = speedYSign * (1 + Math.random() * 2);
};
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 / 2) >= canvas.width && this.speedX > 0 ||
(this.xPos - this.frameWidth * this.frameScale / 2) <= 0 && this.speedX <= 0) {
this.speedX = -this.speedX;
}
this.yPos += this.speedY;
if ((this.yPos + this.frameHeight * this.frameScale / 2) >= canvas.height && this.speedY > 0 ||
(this.yPos - this.frameHeight * this.frameScale / 2) <= 0 && this.speedY <= 0) {
this.speedY = -this.speedY;
}
};
一个相当简单的选择是随机选择时间，然后在该时间之后改变鱼的方向。我首先想到的是使用setTimeout。我注意到您的changeDirection函数中的比较是向后的，因此我将其修复，并将其设置为在一段时间后随机调用。
Fish.prototype.changeDirection = function () {
var me = this;
var speedXSign = this.speedX < 0 ? 1 : -1;
var speedYSign = this.speedY < 0 ? 1 : -1;
this.speedX = speedXSign * (1 + Math.random() * 2);
this.speedY = speedYSign * (1 + Math.random() * 2);
var time = 1000 + 2000*Math.random();
setTimeout(function() {me.changeDirection()}, time);
};
您可以通过调整时间变量来更改周转频率。然后，当您添加一条新鱼时，您需要初始化changeDirection循环，因此init可能如下所示：
function init() {
frameWidth = imgFish.width / frameCount ;
frameHeight = imgFish.height ;
document.getElementById("button").onclick = function() {
// create another fish using the Fish class
var anotherFish = new Fish(xPos, yPos, speedX, speedY, imgFish, frameWidth, frameHeight);
// put this new fish into the fishes[] array
fishes.push(anotherFish) ;
// make it start changing directions
anotherFish.changeDirection();
// draw this new fish
anotherFish.drawFish();
}
animate();
}
另外，您也不想改变每一帧的方向，因此请将fish.changeDirection();线条从animate功能中删除。
作为附带说明，您可以考虑使它们独立或随机而不是每次都改变x和y方向。这使它看起来更加自然。
var speedXSign = Math.random() < 0.5 ? 1 : -1;
var speedYSign = Math.random() < 0.5 ? 1 : -1;
编辑：JSFiddle
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句