Criando Um Jogo Arkanoid com Javascript (6)

Nesta sexta postagem, vamos quebrar o nosso código em pequenas funções com dois objetivos: (1) melhorar a legibilidade e (2) possibilitar o reuso por meio de funções menos específicas. Além disso, vamos melhorar a coerência do nosso código dando nomes melhores para cada comportamento.

A primeira alteração será renomear o método detectaColisao, que não tem o objetivo de detectar colisão, mas destruir as barrinhas que estão sofrendo colisão. Seu nome será alterado para quebraBarrinhas. Na imagem abaixo, vemos outros trechos que serão alterados nesse método. Veja:

Na linha 28, vemos a primeira alteração: renomear o método para quebraBarrinhas.
A segunda alteração, indicada com o número 2, ainda não foi feita. O objetivo é remover o cálculo dos quadrantes para métodos específicos: pegaQuadranteY, pegaQuadranteXEsq e pegaQuadranteXDir.
A terceira alteração, indicada com o número 3, é criar o método pegaBarrinha, que deve receber o quadrante específico de onde deve-se buscar a barrinha.
A quarta alteração, que não está indicada, é reimplementar a função quebraBarrinhas para usar esses métodos. Veja:

O próximo passo é refatorar o método quebraBarrinhas para usar os métodos criados anteriormente:

Pronto! Nosso código está muito mais legível e coeso. Vale notar também que, às vezes, esse tipo de alteração pode sacrificar um pouco a performance, mas essa discussão está fora do escopo desse treinamento.

Outra melhoria que faremos será no método movimenta bolinha. Assim como fizemos no quebraBarrinhas, vamos melhorar a legibilidade do código dando mais significado aos if's por meio de funções e também aumentaremos o reuso:

As linhas que contém os If's estão circuladas, pois serão elas que receberão uma melhora. Para facilitar a manutenção do código, iremos isolar o código dos if's em pequenas funções: acimaDoCenario, abaixoDoCenario, alemDoLimiteEsquerdo, alemDoLimiteDireito, assim como faremos uma função que isolará o código da movimentação padrão da bolinha. O nome dessa função será movimentoPadrao. Veja:

Note que o código de cada função é exatamente o mesmo código que está dentro dos if's do método movimentaBolinha. Agora iremos utilizar esses métodos refatorando o movimentaBolinha. Veja:

Pronto! Rode o jogo e veja que tudo continua funcionando. Esse post não teve como objetivo criar qualquer outra lógica para o nosso jogo. Minha intenção foi dar a devida importância a essas refatorações que melhoram a leitura do código. Entenda que código é igual coelho: se reproduz em uma velocidade enorme. Se não tivermos a preocupação de deixá-lo mais legível, teremos muita dificuldade de continuar evoluindo o código.

E, com relação a essas refatorações que fizemos, note também que o nosso código possui a mesma linguagem que usamos ao explicar o funcionamento do jogo. Uma pessoa leiga consegue conversar com você, programador, sobre o jogo, na mesma linguagem que você implementa o próprio jogo. Se eu disser pra você: fulano, ao mover a bolinha, se esta passar por cima do cenário, você precisará encostar ela no topo e alterar a sua direção no eixo Y. Ora, isso não é exatamente o que está escrito nas linhas 58, 59 e 60 da imagem anterior?

No próximo post, iremos implementar a lógica que faz a bolinha mudar de direção quando colidir com as barrinhas.