melhorar o código

ei, gente, tudo bem com vocês? quando o professor disse em "melhorar o nosso código, torná-lo mais legível", me surgiu uma dúvida: quanto menor um código (se fizermos uma refatoração certinha e tals), ele será considerado "melhor"? e quando eu pulo linhas (e deixo-as em branco) só para deixar as coisas mais separadinhas, eu estou "poluindo" o meu código? olhem como está o meu código até então (tem vários trechos comentados, para eu assimilar melhor - aliás, os comentários também poluem o código, quando em excesso?):

//tamanhos e posicoes:

//bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametro = 20;
let raio = diametro / 2;

//raquete
let xRaquete = 5;
let yRaquete = 150;
let larguraRaquete = 10;
let comprimentoRaquete = 90;

//raquete2
let xRaquete2 = 585;
let yRaquete2 = 150;


//movimentos:

//bolinha
let velocidadeXBolinha = 6;
let velocidadeYBolinha = 6;

//raquete2
let velocidadeYRaquete2;

//placar
let placarRaquete = 0;
let placarRaquete2 = 0;

function setup(){
  createCanvas(600, 400);
}

function draw(){
  background(0, 0, 255);
  mostraBolinha();
  movimentaBolinha();
  verificaColisaoBolinha();
  mostraRaquete(xRaquete,yRaquete);
  movimentaRaquete();
  colisaoRaqueteBolinha();
  mostraRaquete (xRaquete2, yRaquete2);
  movimentaRaquete2();
  colisaoRaquete2Bolinha();
  incluiPlacar();
  marcaPonto ();


} //o erro que estava dando era porque uma estrutura condicional nao estava dentro do escopo da function draw(), eu fechava com os colchetes antes, logo o interpretador nao identificava. agora eu fecho ele aqui certin

function mostraBolinha(){
  fill (255, 255, 0)
  circle(xBolinha, yBolinha, diametro);
}

function movimentaBolinha(){
  xBolinha = xBolinha + velocidadeXBolinha;
  yBolinha += velocidadeYBolinha;
}

function verificaColisaoBolinha(){
  if (xBolinha + raio > width ||
   xBolinha - raio < 0){
  velocidadeXBolinha = velocidadeXBolinha * -1;
 }

if (yBolinha + raio > height ||
   yBolinha - raio < 0){
  velocidadeYBolinha *= -1;
}
}

//para criar as duas raquetes, eu usei a mesma funcao, so mudei os parametros (assim o codigo fica melhor escrito)
function mostraRaquete(x,y){
  fill (0, 100, 0)
 rect (x, y, larguraRaquete, comprimentoRaquete) 
}

function movimentaRaquete(){
  if (keyIsDown (UP_ARROW)){
    yRaquete = yRaquete - 10
  }
  if (keyIsDown (DOWN_ARROW)){
    yRaquete += 10;
  }
}

//esse entendi mais ou menos (nao entendi a terceira linha)
function colisaoRaqueteBolinha(){
  if (xBolinha - raio < xRaquete + larguraRaquete && 
      yBolinha - raio < yRaquete + comprimentoRaquete &&
      yBolinha + raio > yRaquete){
    velocidadeXBolinha *= -1;
  }
}

//meu deus, nao entendi nada da funcao a seguir
function movimentaRaquete2(){
  velocidadeYRaquete2 = yBolinha - yRaquete2 - larguraRaquete / 2 - 30;
  yRaquete2 += velocidadeYRaquete2
}

//se aquele eu nao entendi muito bem, esse entendi menos ainda
function colisaoRaquete2Bolinha(){
  if (xBolinha + raio > xRaquete2 &&
     yBolinha + raio < yRaquete2 + comprimentoRaquete &&
     yBolinha + raio > yRaquete2 - comprimentoRaquete){
    velocidadeXBolinha *= -1;
  }
}

function incluiPlacar(){
  fill (255)
  text (placarRaquete, 150, 30);
  text (placarRaquete2, 450, 30)
}

function marcaPonto(){
  if (xBolinha > 590){
    placarRaquete += 1;
  }
  if (xBolinha < 10){
    placarRaquete2 += 1;
  }
}

obrigada, pessoal :)