Exercicio do curso de Lógica de Programação II

Olá!

Esta é a minha primeira postagem no forum, sou muito novo neste mundo de programação, estou tendo muita dificuldade com alguns exercícios e outros até consigo fazer, mas estou curtindo muito este novo mundo. :D \0/

Eu tenho uma dúvida em relação a uma proposta de exercício do Módulo 03, aula 6.

O enunciado do exercício era assim:

Aproveitando o código feito nas aulas anteriores ,altere o código para que o círculo, assim que chegar no canto direito da tela, volte. No final, o círculo deve ficar indo e voltando eternamente.

A lógica do exercício eu fiz, e conforme foi proposta, mas comparando o que eu fiz, com o que o professor fez, ficou muito diferente, fico na dúvida se eu viajei demais, ou da forma que eu fiz não é uma boa prática, ou esta mesmo errado a forma que eu fiz.

Segue o código que eu fiz:

<canvas id="canvas" width="1000" height="400"></canvas>

    <script>
        // Definido o tipo, tamanho e cor do canvas
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');
        pincel.fillStyle = 'lightgray';
        pincel.fillRect(0, 0, 600, 400);

        // Definindo o raio, eixo X, eixo Y e declarando uma variavel para startar a animacao da bolinha
        var raio = 10;
        var posicaoEixoX = 10;
        var posicaoEixoY = 20;
        var animarObjeto = true;

        function desenhaCirculo(eixoX, eixoY, raio, cor) {
            pincel.fillStyle = cor;
            pincel.beginPath();
            pincel.arc(eixoX, eixoY, raio, 0, 2 * Math.PI);
            pincel.fill();
        }

        function limpaTela() {
            pincel.clearRect(0, 0, 600, 400);
        }

        function  atualizaTela() {

            // Inicia a animacao do ponto 20 do eixo X
            // e faz o inclemento de 1 em 1, e verifica
            // se a variavel que da inicio a animacao e true
            if (animarObjeto) {
                limpaTela();
                desenhaCirculo(posicaoEixoX,posicaoEixoY, raio, 'red');
                posicaoEixoX++;

                // Verifica se eixo X e igual a 590 e desliga a variavel com false
                // para parar de incrementar o eixo X
                if (posicaoEixoX == 590) {
                    animarObjeto = false;
                }

            }
            // Inicia a animacao do ponto 590 do eixo X
            // e faz o decremento de 1 em 1, e verifica
            // se a variavel que da inicio a animacao e false
            else if (!animarObjeto) {
                limpaTela();
                desenhaCirculo(posicaoEixoX,posicaoEixoY, raio, 'red');
                posicaoEixoX--;

                // Verifica se eixo X e igual a 10 e liga a variavel com false
                // para parar o decremento do eixo X
                if (posicaoEixoX == 10) {
                    animarObjeto = true;
                }
            }

        }

        setInterval(atualizaTela, 5);

    </script>

Segue o código que o professor fez como alternativa para resolver o exercício:

<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>

Bom, é isso, desde já agradeço a todos pela ajuda!