Criando Um Jogo Arkanoid com Javascript (5)

Já temos a movimentação da bolinha e já conseguimos destruir os quadradinhos ao colidir, mas temos um pequeno detalhe que devemos corrigir o quanto antes. A bolinha consegue passar dos limites do cenário e isso deixa o jogo um pouco estranho. É possível explicar melhor essa situação com a imagem abaixo:

Na imagem acima, podemos ver que a bolinha estava subindo, bateu no topo do browser e ricocheteou para baixo. Quando ela colide com a lateral direita do browser, vemos que ela passa alguns pixels do cenário e, só então, mudamos sua direção. Temos que melhorar o nosso sistema de colisão para que a bolinha não passe do cenário.
A ideia aqui é implementar uma lógica que verifica qual a próxima posição da bolinha. Se esta passar do cenário, temos que corrigir para que a próxima posição ainda esteja dentro do cenário. Primeiro, criaremos duas funções que nos dão a próxima posição X e Y da bolinha. Veja:

As linhas 55 e 59 estavam dentro da função movimentaBolinha, mas agora essa função deverá verificar se, na próxima vez que a bolinha for movimentada, ficará fora dos limites do browser. Se sim, deveremos encostar a bolinha em alguma das extremidades. Veja como ficou a função:

Nas linhas 63 e 64, chamamos a função que criamos anteriormente para pegar as próximas posições da bolinha.
Na linha 66, verificamos se a bolinha ficará fora do limite superior do browser. Isso já fazíamos antes, mas agora estamos chamando uma função encostaNoTopo, que encosta a bolinha no topo do browser, impedindo que ela passe do limite superior. O mesmo fizemos nas linhas 70, 74 e 78, verificando as outras extremidades.
Somente se a bolinha não estiver passando de nenhumas das extremidades é que as linhas 83 e 84 serão executadas. Essas linhas executam o comportamento de posicionamento normal da bolinha.

Note que a função movimentaBolinha faz mais que a movimentação. Ela também detecta a colisão nos limites do browser. Acontece que já temos outra função, chamada detectaColisao, que verifica a colisão nas barrinhas e também destrói as barrinhas. Isso é um sinal de que poderemos ter problemas no futuro. Talvez tenhamos que colocar cada comportamento no seu devido "quadrado".
As funções encostaNoTopo, encostaEmBaixo, encostaNaEsquerda e encostaNaDireita ainda não foram implementadas, mas não são difíceis. A lógica delas consiste em verificar quantos pixels faltam para a bolinha encostar em uma das extremidades. Por exemplo: a bolinha anda 3px por vez, mas faltam apenas 2px para encostar na extremidade esquerda. O que temos que fazer é mover a bolinha 2px para a esquerda e outros dois para cima ou para baixo, dependendo da direção dela. Veja:

Na linha 90, implementamos a função encostaNoTopo. Na linha 91, pegamos quantos pixels faltam para a bolinha alcançar o topo do browser. Isso é fácil! É só pegar sua posição Y.
Na linha 92, colamos a bolinha no topo do browser e, na linha 93, alteramos a posição da bolinha no eixo X, que é sua própria posição somada com a variação da bolinha vezes a direção no eixo X. É essa variável direcaoX que nos diz para que lado a bolinha deve andar: esquerdo ou direito.

Para perceber essa melhoria, aumente o valor da variável velocidade para 20. Você verá que a bolinha saltará de um lado para o outro, mas nunca passará das extremidades do browser.

Essa postagem foi bem menor, mas teve um bom objetivo: trabalhar melhor a lógica de colisão. Terminamos com dois comportamentos de detecção de colisão que estão em lugares diferentes. No próximo post, organizaremos nosso código quebrando em pequenas funções. Isso nos ajudará a mantê-lo mais legível e reusável.