Gostaria de saber se para esse exercício seria possível utilizar o for?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Gostaria de saber se para esse exercício seria possível utilizar o for?
Para esse exercício não cabe o FOR como parte da resposta.
Não precisa do for por que o setInterval ele serve como um for por assim dizer só que infinito pois ele vai atualizar a tela de tempos em tempos, Abaixo tem um projetinho dessa bolinha pulsante indo para um lado e para o outro infinitamente.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<canvas width="600" height="400"></canvas>
</body>
</html>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'beige';
pincel.fillRect(0, 0, 600, 400);
function desenhaCirculo(x, y, raio, cor) {
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * Math.PI);
pincel.fill();
}
function limpaTela() {
pincel.clearRect(0, 0, 600, 400);
}
var x = 20;
var raio = 10;
var pulsoRaio = 1;
var sentido = 1;
function atualizaTela() {
limpaTela();
desenhaCirculo(x, 30, raio, 'blue');
if (x > 600) {
sentido = -1;
}
else if (x < 0) {
sentido = 1;
}
x += sentido;
if(raio > 30){
pulsoRaio = -1;
}
else if(raio < 20){
pulsoRaio = 1;
}
raio += pulsoRaio;
}
setInterval(atualizaTela, 20);
</script>