Alguém poderia me explicar o motivo de quando aplico esse código ele não movimenta minha bolinha?

Olá Álvaro! Tudo certo? Espero que sim. 🙂

Existem algumas questões no seu código. Vamos lá.

Primeiramente, precisamos retirar os paramêtros existentes em algumas de suas funções. Isso é necessário porque queremos alterar os valores guardados pela variável x.

Vamos alterar as seguintes funções:

// ANTES:

    function velocidadeBola(x){
         x = x + velocidadeXBola;
    }

        function movimentaBola(x){
        desenhaBola(x,20,10);
        velocidadeBola(x);    
    }

// DEPOIS:

    function velocidadeBola(){
         x = x + velocidadeXBola;
    }

        function movimentaBola(){
        desenhaBola(x,20,10);
        velocidadeBola();    
    }

Agora, é importante entender que temos que colocar o código de criação da bolinha em loop para que a bolinha possa ser gerada várias vezes e dar a impressão de deslocamento. Para fazer isso, o professor mostrou a função setInterval(), que cria um loop com um tempo de atraso entre cada repetição ser iniciada. Esse atraso é essencial para que nossos olhos humanos consigam acompanhar o processamento rápido de um loop feito pelo computador.

Vamos começar adicionando isso ao seu código:

// Antes: 
movimentaBola(x);

//Depois:
setInterval(movimentaBola, 10);

Agora o código já deve estar funcionando na criação de várias esferas. Precisamos criar a impressão de movimento limpando a tela após a criação de cada esfera. Para isso, vamos adicionar uma função de limpar a tela e integra-lá na função movimentaBola().

// DEPOIS DA ALTERAÇÃO:

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

 function movimentaBola() {
        limpaTela();
        desenhaBola(x,20,10);
        velocidadeBola();   
 }

Após fazer tudo isso, o código deve funcionar normalmente.

Espero ter ajudado! Quaisquer dúvidas, estou à disposição. 😉