具有不间断反射的精灵图像

Posted 2023-03-25

【中文标题】具有不间断反射的精灵图像

【英文标题】：Sprite image having non-stop reflection

【发布时间】：2014-07-27 06:10:10

【问题描述】：

当我在画布上绘制我的精灵图像时，假设它会从画布的侧面反射出来。但是在我在画布上绘制了更多的精灵图像之后，当我碰到画布的一侧时，它们会不停地反射，使其成为单独的画布一侧的双图像。这是使它改变方向的代码：

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/

【参考方案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/

【讨论】：

用一个工作示例更新了我的答案。请重新阅读我的解释。它拥抱墙壁，因为它在接近和远离墙壁时会与侧面“碰撞”。

另外，“重复”的鱼是相同的鱼每帧翻转方向非常快（左-右-左-右-左-右-左-右）