Criando Um Jogo Arkanoid com Javascript (4)

Neste quarto post sobre o desenvolvimento de um jogo no estilo Arkanoide, implementaremos a lógica que detecta a posição da bolinha em relação aos quadradinhos para conseguir destruí-los.

Primeiramente, vamos adicionar uma variável que controlará a velocidade da "bolinha". O nome dela será velocidade. A partir de agora, iremos ajustar o posicionamento da bolinha com essa variavel. A variável direcao será usada para dar a direção para a velocidade. Dependendo do sinal, a velocidade modificará a posição para um lado ou outro. Veja:

Sempre que movimentarmos a "bolinha", faremos isso acrescentando 3px, como indicado na linha 5. Nas linhas 13 e 14, usamos as variáveis direcaoY e direcaoX para manipular a direção. Se a "bolinha" tiver que se mover para cima, a velocidade será multiplicada por -1. Com isso, a "bolinha" se aproximará 3px do topo do Browser.

Uma maneira de enchergar a construção desses jogos de forma que os problemas que virão sejam relativamente fáceis de resolver, é como se todo o cenário fosse formado por quadradinhos. Veja:

A "bolinha" com o número 1 está 68 pixels de distância da lateral esquerda e a 165px de distância do topo do Browser. Ou, está no segundo quadradinho da quarta fileira.

A "bolinha" (a partir de agora vou parar de usar aspas. O leitor já deve ter entendido que a bolinha, na verdade, é um quadrado, mas que será redesenhado futuramente) de número 2, está encostando no quarto e quinto quadradinhos da primeira fileira. Quando detectarmos que a bolinha está em quadrantes que possuem barrinhas, precisamos fazer duas coisas: quebrar as barrinhas e alterar a direção da bolinha. Mas como faremos para detectar em qual ou quais quadrantes está a bolinha e, posteriormente, que barrinhas estão sendo colididas e que devem ser quebradas?

Fácil! Ao dividirmos a posição y da bolinha 1, que é 125, por 50, descobriremos que ela está depois da fileira 3, já que o resultado é 3,3. Esse cálculo sempre arredondaremos para cima, portanto, consideraremos que a bolinha 1 está na fileira 4. Se dividirmos 68 por 50 e arredondarmos para cima, veremos que ela está no quadradinho 2.

Já sabemos a posição da bolinha 1 e agora temos que responder a pergunta: existe alguma barrinha no segundo quadradinho da quarta fileira? Não! Então não temos o que fazer.

Todavia, a bolinha 2 está em contato com duas barrinhas, as do quarto e quinto quadradinhos da primeira fileira. Precisaremos quebrar essas barrinhas. Mas antes, como faremos para saber que a bolinha está em colisão com barrinhas?

Vamos ao código:

Criamos mais uma função que é chamada logo após a movimentação da bolinha. Nas linhas 32 e 33 da detectaColisao, pegamos a posição da bolinha em pixels e, logo em seguida, nas linhas 35 e 36, transformamos a posição de pixels para quadrantes. Na linha 38 imprimimos esse valores convertidos no log. Isso é mostrado na imagem anterior. No momento em que salvei a imagem da tela, a bolinha estava subindo em direção a esquerda e estava na primeira linha e no quadranteX igual a 4. Ou seja, ela estava exatamente em cima da quarta barrinha. 

A função Math.ceil é igual a Math.round, todavia, aquela arredonda sempre pra cima

Já sabemos a posição da bolinha e agora precisaremos desabilitar as barrinhas. Quebrar a barrinha nada mais é que trocar a cor dela para branco. Mas como faremos para pegar a barrinha? Ora, cada barrinha possui um id, mas que ainda não é individual como deveria. O que faremos é alterar o algorítmo que cria as barrinhas para adicionar um id específico para cada uma. Veja:

Ao atualizar o código, veremos que as barrinhas sumiram. Isso aconteceu, pois o estilo visual das barrinhas está atrelada, no css, ao atributo id com nome barrinha. Como cada barrinha possui o id dinâmico atrelado a um número, como: barrinha_0, barrinha_1 etc, o css não é mais aplicado às barrinhas. Para resolver isso, vamos fazer, aliás, da forma correta. Atrelaremos o estilo visual das barrinhas a uma classe, assim como fizemos com a bolinha. Veja:

estilo.css

codigo.js

No arquivo estilo.css, transformamos a configuração visual barrinhas de div para class, alterando o prefixo "hashtag" para o ponto.

E no codigo.js, adicionamos mais um atributo na linha 70. Assim como fizemos com a bolinha.

A partir de agora, as barrinhas voltarão a aparecer.

Mas porque fizemos isso? Ora, quando a bolinha estiver no quadrante de número da primeira linha, ela estará em cima da barrinha com id 0. Na linha 67, ao criar as barrinhas, começaremos a contar o laço a partir do número 0. Por isso que no primeiro quadrante temos a barrinha_0.

O que faremos agora é: quando a bolinha estiver na primeira linha, pegaremos a barrinha do quadranteX específico e iremos destruí-la. Veja:

Na linha 38, verificamos se o quadranteY é diferente de 1. Como temos barrinhas apenas no primeiro quadrante, não faz sentido buscar barrinhas quando esse valor é diferente de 1. Na linha 39, chamamos o return para parar a execução do método. Nada após a chamada do return é executado, pois o javascript entende que o método já finalizou sua execução.

Na linha 42, pegamos a div da barrinha que está em colisão. Reparem que estamos concatenando a palavra barrinha_ com o valor da variável quadranteX menos 1. Quando o quadrante é 1, a barrinha é 0. Veja:

Na linha 43, verificamos se encontramos alguma barrinha e, se sim, alteramos sua cor para branco. É assim que, por enquanto, destruiremos a barrinha.

Todavia, ao analisar por alguns segundos a execução no Browser, vemos que as barrinhas são destruídas apenas quando o canto superior esquerdo da bolinha encosta nelas. Precisamos verificar a colisão do canto superior direito também. O que faremos é calcular em qual quadranteX está este outro canto da bolinha. (Só eu acho esquisito falar em canto ao se referir a uma bolinha?). Veja:

Agora, nas linhas 36 e 37, calculamos os quadrantes do canto direito e esquerdo, respectivamente. Para calcular o quadranteXDir, acrescentamos 20pixels à posXBolinha. Esse 20pixels corresponde a largura da bolinha.

Agora, nas linhas 44 e 49, verificamos as barrinhas desses dois quadrantes. Pronto! O sistema de colisão do nosso jogo está funcionando corretamente.

No próximo post implementaremos a movimentação da bolinha ao colidir com as barrinhas. Atualmente ela colide e nada acontece com ela. Ela é uma super bolinha! No futuro ela deve ser rebatida pelas barrinhas e precisaremos implementar toda a lógica de direcionamento dela.