具有不停反射的雪碧圖像

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和快速）：

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/