Skip to main content
Remoção de snippet desnecessário
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

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

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

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

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();
Fonte Link

Por que essa bolinha verde consegue retroceder, na animação, usando essa condicional?

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?