Bolinha DVD

Olá, Roger! Tudo bem contigo?

Desculpe a demora em dar um retorno!

Sua ideia de criar funções caberia bem, pois vai isolar os comportamentos e deixar mais fácil a manutenção do código. Bacana perceber quando algo começa a se repetir bastante, criar funções e amenizar essas repetições

Vale a tentativa

Caso desenvolva dessa forma, nos dê um retorno para discutirmos

Um abraço e bons estudos

Bom dia Róger, tudo certo?

Adorei essa variação da atividade! Realmente eu ficava mesmerizado olhando esse descanso de tela hahaha

Sobre a dúvida em si: existem sim formas de reduzir as quantidades de testes condicionais que ficam aparentes e criar funções separadas que lidem com esses dados, mas recomendo não se preocupar excessivamente com esses aspectos do seu código no começo. Com o tempo você vai desenvolvendo práticas que vão te auxiliar nesse tipo de organização, mas para facilitar vou deixar algumas dicas que eu costumo utilizar:

Você pode utilizar operadores lógicos dentro de suas expressões. Esses operadores te permitem testar mais de uma coisa ao mesmo tempo, como por exemplo:

Digamos que você queira ver se uma variável é maior que 6 ou menor que 10. Podemos escrever uma validação em JavaScript como:

function maiorQueSeisOuMenorQueDez( numero ) {
    if ( numero > 6 || numero < 10 ) {
        return true
    }
    else {
        return false
    }
}

Então podemos utilizar as duas barras verticais || para representar esta operação. Caso queira outros exemplos e entender melhor sobre as operações lógicas eu sugiro dar uma olhada na documentação da Mozilla (MDN).

Outro padrão que eu vi e pensei em utilizar no seu código é o seguinte: caso tenhamos uma variável que vale 7, por exemplo, e queiramos que ela assuma o mesmo valor porém negativo, podemos realizar:

var numero = 7

numero *= -1 

// Agora numero vale -7
// E isso funcionaria independente do valor anterior

E eu decidi combinar essas 2 estratégias para realizar o seguinte: ter apenas um teste para ver se a nossa logo do DVD está dentro dos limites em cada dimensão, assim:

if ( x > 570 || x < 30) {
    incrementX *= -1;
    n += 1;
}

Ou seja, se o logo estiver fora dos limites em x, faça com que o variável incrementX receba o valor dela mesmo, mas com o valor trocado.

Aqui está o código completo com as alterações que fiz para testar, caso queira dar uma olhada:

<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, r, cor) {

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, r, 0, 2 * Math.PI);
        pincel.fill();
    }

    function limpaTela() {

        pincel.clearRect(0, 0, 600, 400);
    }

    var r = 25;
    var increment = 1;
    var x = 200;
    var y = 300;
    var incrementX = 7;
    var incrementY = 7;
    var colors = ['darkred','red', 'orange','yellow', 'green','darkgreen','blue','indigo','violet'];
    var n = 0

    function atualizaTela() {
        limpaTela();

        if ( r > 30 || r < 20) {
            increment *= -1;
        }
        if ( x > 570 || x < 30) {
            incrementX *= -1;
            n += 1;
        }
        if (y > 370 || y < 30){
            incrementY *= -1;
            n +=1;
        }
        if(n > 8) {
            n = 0;
        }
        desenhaCirculo( x, y, r, colors[n]);
        r = r + increment;
        x = x + incrementX;
        y = y + incrementY;
    }


    setInterval(atualizaTela,20);

</script>

Caso tenha alguma dificuldade de primeira, saiba que é completamente normal. Todos nós precisamos dormir um pouco pensando nesses padrões para aprender no longo prazo. Mas qualquer dúvida não exite em perguntar!

Continue fazendo esses exercícios divertidos e bons estudos!