Alguém sabe como fazer os círculos ficarem repetindo sozinho?
quando chegar no final eles voltarem para o inicio como loop?
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
Alguém sabe como fazer os círculos ficarem repetindo sozinho?
quando chegar no final eles voltarem para o inicio como loop?
Olá Giuliano, tudo ok por aí ?
Sobre a ida e volta da bolinha, na verdade você verá isso mais pra frente no curso!
Você terá um exercício sobre isso nessa aula:
E um possível código que poderia fazer essa função de ir e voltar com a bolinha seria esse:
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'lightgray';
pincel.fillRect(0, 0, 600, 400);
function desenhaCirculo(x, y, raio) {
pincel.fillStyle = 'blue';
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 sentido = 1;
function atualizaTela() {
limpaTela();
if (x > 600) {
sentido = -1;
} else if (x < 0) {
sentido = 1;
}
desenhaCirculo(x, 20, 10);
x = x + sentido;
}
setInterval(atualizaTela, 10);
</script>Em síntese era isso, caso tenha mais dúvidas recorra ao fórum novamente!
Estarei à disposição.
Um grande abraço e bons estudos.
Acrescente uma linha à função (a do IF):
function atualizaTela() {
limpaTela();
desenhaCirculo(x, 20, 10);
console.log(x);
x++;
if (x==600) { x = 20 }
}Oi Renan tudo certo, obrigado pelo retorno.
Gabriel eu acrescentei somente a linha do IF e deu certo, porém no código que você mandou tem console.log(x);
qual seria a função dele pois sem ele o código funcionou sem a necessidade de coloca-lo?
Pode ignorar o console.log(x).
Eu usei para verificar se os valores estavam sendo lidos e exibidos de forma correta.
Às vezes usamos este recurso para verificar os valores de variáveis e funções durante a execução do código.
Neste caso eu queria saber qual era o valor de x quando a bola sumia.