Question

当我在画布上绘制精灵图像时，它会反射出画布的两侧。但是当我在画布上绘制更多的精灵图像之后，当我击中画布的一侧时，它会反射不停地使它成为画布一侧的双重图像。以下是使其改变方向的代码：

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

绘制多个精灵图像后，我可以检查错误：http://jsfiddle.net/Bernard_9/8gTNk/7/

Answer 1

当鱼撞到一边时，它应该反映出来。但是，你没有检查鱼在朝着它移动的时候撞到侧面。例如，鱼正向右，并进入右壁。 speedX翻转，所以他正在另一个方向旅行。下一次检查位置时，他仍然跑到墙上（即使他正在离开它），所以speedX再次翻转（现在又向右移动），所以他跑到墙上，然后过程重复。

固定代码（请注意speedX和speedY的检查）：

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

http://jsfiddle.net/8gTNk/8/

具有不间断反射的雪碧图像

1 个答案: