[Dúvida] Praticano o que aprendi | Programação | Alura

Olá, Jorge! Que bom que está praticando o que aprendeu! Isso é super importante para fixar o conhecimento. :)

Sobre o seu código de animação, talvez você possa usar o setInterval ou o requestAnimationFrame para criar o movimento do quadrado. Vou te passar um exemplo básico com requestAnimationFrame para te ajudar:

<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animação de Quadrado</title>

</head>

<body>

  <div id="quadrado"></div>
  <script src="animacao.js"></script>
</body>

</html>

CSS:

#quadrado {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
}

JavaScript:

const quadrado = document.getElementById("quadrado");
let posicaoX = 0;

function animar() {
  posicaoX += 2; // Aumenta a posição X a cada frame
  quadrado.style.left = posicaoX + "px"; // Aplica a posição no estilo

  if (posicaoX < window.innerWidth) {
    requestAnimationFrame(animar); // Continua a animação até sair da tela
  }
}

animar(); // Inicia a animação

Neste código, o quadrado vai se mover para a direita, e quando atingir o limite da tela, ele vai parar. Você pode ajustar o valor do posicaoX ou adicionar outras propriedades para deixar a animação mais interessante.

Você pode conferir aqui no CodePen o exemplo ativo.

Continue praticando! :)