Eu tenho um código em javascript que faz uma animação de uma bolinha verde que se movimenta até chegar no limite da largura da janela, fazendo com que a bolinha volte, faça o caminho contrário, até chegar no outro lado da janela, e então voltar de novo e assim por diante.
var canvas = document.querySelector("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var c = canvas.getContext("2d");
var x = 200;
var dx = 10;
var radius = 30;
function animate() {
requestAnimationFrame(animate);
c.clearRect(0, 0, window.innerWidth, window.innerHeight);
c.beginPath();
c.arc(x, 200, radius, 0, Math.PI * 2, false);
c.strokeStyle = "red";
c.fillStyle = "green";
c.stroke();
c.fill();
if (x + radius > window.innerWidth || x - radius < 0 ) {
dx = -dx;
}
x += dx;
};
animate();
A minha dúvida está nessa condicional:
if (x + radius > window.innerWidth || x - radius < 0 ) {
dx = -dx;
}
Na primeira vez que a bolinha chega no limite da janela, a primeira condicional é usada, fazendo com que o valor da várivel dx
ficasse negativo, para que a bolinha começasse a andar para trás. Agora quando a bolinha chega ao outro limite da janela, a segunda condicional é usada, executando aquele código para deixar o dx
negativo.
A minha dúvida é, por que, quando a segunda condicional é usada, a bolinha consegue voltar novamente, sendo que o valor da váriavel dx
já está negativo, não era para continuar indo sem parar?