Gostaria de esclarecer uma dúvida se possível. Quando estava tentando solucionar o exercício, pensei em declarar uma variável naoChegou com o valor inicialmente true, a alternância de seus valores em true e false dentro dos blocos das instruções atualizaTela e atualizaTela2 e a atividade e inatividade das funções setInterval por meio da variável naoChegou. Tentei por muito tempo mas não obtive um êxito. Seria possível solucionar esse exercício por meio dessa ideia?
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
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 naoChegou = true;
function atualizaTela() {
limpaTela();
pincel.fillStyle = 'lightgray';
pincel.fillRect(0, 0, 600, 400);
desenhaCirculo(x, 20, 10);
x++;
//aqui a variável naoChegou deveria adquirir o valor false quando x > 600
}
if(naoChegou) {
setInterval(atualizaTela, 10); //essa função seria desligada assim que naoChegou fosse false
}
function atualizaTela2() {
limpaTela();
pincel.fillStyle = 'lightgray'
pincel.fillRect(0, 0, 600, 400);
desenhaCirculo(x, 20, 10);
x = x - 1;
//e aqui a variável naoChegou deveria adquirir o valor de true quando x < 0
}
if(naoChegou == false) {
setInterval(atualizaTela2, 10); //e essa função seria ligada assim que naoChegou fosse false
}
</script>