Não compreendo o erro do meu código. Com ele a bolinha vai apenas em um sentido e não compreendo o porquê.
<meta charset="utf-8">
<title>Movimento</title>
<head><h2>Bolinha que se movimenta. Repetindo o código para fixar.</h2></head>
<br>
<body>
<canvas width="600" height="400"></canvas>
<script type="text/javascript">
var tela = document.querySelector ("canvas");
var pincel = tela.getContext ("2d");
pincel.fillStyle = "lightgrey";
pincel.fillRect(0,0,600,400);
function desenhaBola (x,y){
pincel.fillStyle = "blue";
pincel.beginPath ();
pincel.arc (x,y,10,0,2*Math.PI);
pincel.fill();
}
var i = 0
var caminhoIda = true
var caminhoVolta = false
function movimentoIda (){
pincel.clearRect (0,0,600,400);
desenhaBola (i,100);
i++
}
function movimentoVolta (){
pincel.clearRect (0,0,600,400);
desenhaBola (i,100);
i=(i-1);
}
function idaVolta(){
if(i>=600){
caminhoIda==false;
caminhoVolta ==true;
}
if (i<=0){
caminhoVolta==false;
caminhoIda ==true;
}
if (caminhoIda){
movimentoIda();
}
if (caminhoVolta){
movimentoVolta();
}
}
setInterval(idaVolta,5);
</script>
</body>Não entendo porque a bola não retorna se coloquei os condicionais. Outra dúvida que surgiu ao ver a solução do instrutor foi por que que as condicionais que definem o "sentido", o incremento de x, devem ficar dentro da função? Tentei retratar o código sem copiá-lo e cometi esse erro e a bola foi em uma direção e não retornou.
Desde já agradeço. Sempre tenho respostas aqui.
