<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);
}
x = 20;
function atualizaTela(){
limpaTela();
desenhaCirculo(x, 20, 10);
x += 1;
}
function voltaBola(){
limpaTela();
desenhaCirculo(x, 20, 10)
x -= 1;
}
function movimentoBola(){
setInterval(atualizaTela, 10);
if(x >= 599){
setInterval(voltaBola,10);
}
}
movimentoBola();
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta
resposta
Por que desse jeito não funciona?
solução!
Olá Patrick, tudo bem com você?
Então o seu código não funciona da maneira correta porque a função movimentaBola() só é executada uma vez, eu vou descrever como seu programa está funcionando para você ter mais ou menos uma ideia:
- A função
movimentaBola()é executada - É disparado um
setInterval(atualizaTela, 10); - Nesse momento é feito a verificação do IF e é falsa ( x é menor que 599)
- Sobra apenas o nosso setInterval executando eternamente pois a função movimenta bola não será executada novamente em nosso programa
Conseguiu entender? Tendo dúvidas é só perguntar :)
Agora veja que em seu código você esqueceu também de declarar que x é uma variável, era para ser var x = 20, não da erro no código mas é sempre necessário declarar nossas variáveis =)
Também recomendo observar a resposta do instrutor que acredito que possa te dar uma ideia da maneira que ele adotou para resolver esse problema.
Abraços e Bons Estudos!