2

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?

1 Resposta 1

1

O valor do resultado dx = -dx; vai ser positivo quando dx for negativo.

Por que?

Assumindo que dx seja um número negativo -10, a expressão seria:

dx = -(-10);

Sendo assim, pela regra da matemática, - com - resulta em número positivo, logo:

dx = -10;
dx = -dx;
dx = -(-10);

dx = 10;

Por outro lado, quando dx for positivo, aí dx se torna negativo:

dx = 10;
dx = -dx;
dx = -(10);

dx = -10;

Então, a cada loop na função, o dx vai trocar de sinal, e uma das condições no if será atendida porque irá influenciar no valor do x.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .