Criando Um Jogo Arkanoid com Javascript (3)

Olá pessoal! Nessa terceita postagem focaremos na organização do nosso código, na criação da bolinha, que será usada para quebrar os quadradinhos, e em sua movimentação.

Primeiramente, organizaremos o código que cria as barrinhas. Para ficar mais legível, criaremos uma função chamada criaQuadradinhos() que, ao ser chamada, deverá executar o código que implementamos no post anterior. Veja:

Para melhorar a legibilidade do código, fizemos duas alterações que manteremos a partir daqui: (1) colocamos a criação das variáveis em cima e (2) as funções em baixo. Na linha 5, colocamos a chamada da função que cria as barrinhas. As linhas de log (console.log) foram removidas. Usaremos o log posteriormente para nos ajudar a conferir o funcionamento dos códigos que criaremos. Entretanto, sabemos que o que já escrevemos funciona, por isso decidi removê-los também por legibilidade.

Nosso próximo passo será criar a bolinha que irá quebrar os quadradinhos. Inicialmente ela será um quadradinho amarelo, mas futuramente iremos melhorar o design do nosso game. Vamos criar o estilo dela. Veja:

Agora, assim como criamos as barrinhas, criaremos a bolinha com Javascript. Entretanto, no caso das barrinhas, apenas por questão de organização visual, criamos uma div específica pra elas. Para falar a verdade, ainda não há um motivo claro sobre a decisão de termos criado a div barrinhas, mas garanto que será um conhecimento útil no futuro. No caso da bolinha, a criaremos diretamente na tag body. Veja como fica o código:

Vamos à explicação:

Na linha 9, criamos a função que cria e adiciona a bolinha no HMTL, como é possível conferir na linha 10.

Na linha 11, usamos a função serAttribute, mas não para setar  atributo id e sim o atributo class. Os dois atributos servem para estilizar um item visual.

Na linha 12, adicionamos a "bolinha" na tag body

Nas 14 e 15, posicionamos a bolinha no centro inferior da página.

Nas linhas 17 e 20, estamos logando a bolinha, mas em escopos diferentes. Na linha 17, ainda estamos dentro da função e, na linha 20, logamos a bolinha num escopo chamado global. Ao rodar o código, veja o que é logado:

Veja que, tanto na linha 17 quanto na 20, conseguimos acessar a bolinha. Isso é ótimo, pois, futuramente, precisaremos, por exemplo, movimentar a bolinha. Note que, na linha 4, criamos a variável que é usada na função criaBolinha() para guardar a bolinha criada. É por causa do local em que essa variável foi criada que conseguimos acessar a bolinha de qualquer lugar do nosso código.

Pronto! Agora precisamos movimentar a bolinha. 

Uma animação é nada mais do que desenhar e apagar algo várias vezes, só que em uma posição próxima da anterior.

Se fizermos isso rápido, nosso cérebro acabará acreditando que algo está realmente se movendo. 

O Javascript e o HTML nos ajudam a fazer isso de uma maneira muito simples. Existe uma função chamada setInterval que executa um comportamento a cada x milisegundos. 1 milissegundo é o mesmo que 1 segundo dividido por 1000. Ou seja, se você desejar, poderá pedir para o Javascript executar um comportamento 1000 vezes por segundo, mas isso é um exagero. No nosso jogo, vamos pedir para o Javascript atualizar a tela uma vez a cada 50 milissegundos. Veja:

Na linha 17, usamos a função setInterval. Ao observar o console, veremos que estamos logando a palavra "atualizando" diversas vezes.

Com isso, movimentaremos a bolinha. A cada vez que a função atualizaJogo for chamada, iremos mover a bolinha na diagonal. Vamos começar direcionando-a para o canto superior esquerdo.

Criamos, então, outra função chamada movimentaBolinha. Na linha 25, estamos logando a posição atual da bolinha, que normalmente vem acompanhada pela abreviatura do pixel, que é "px". O problema é que a maneira como atualizamos a posição da bolinha é, basicamente, sutraindo a posição atual pela quantidade de pixels que queremos mover, no caso 1. Só que quanto é 150px - 1? 150px é um texto e não um número, então não podemos realizar uma operação matemática. Por sorte, a função parseInt remove o px e transforma o conteúdo numérico em número mesmo.  

Ao atualizar o Browser, podemos ver a bolinha se movendo para o canto superior, porém ela faz isso como se não houvesse amanhã. Ela simplesmente não para de subir. Precisaremos verificar a posição da bolinha para que, caso ela passe dos limites do cenário do jogo, ou melhor, do Browser, ela mude de direção para se manter sempre dentro do jogo. Veja como fica;

Nas linhas 25 e 26, criamos as variáveis que indicam qual a direção em cada eixo que a bolinha deve andar. 

Nas linhas 32 a 34, verificamos se a bolinha está além do limite de cima do Browser, ou seja, com o valor top menor que zero. Se sim, invertemos a direção no eixo y. 

Nas linhas 36 a 38, verificamos se a bolinha passou do limite inferior. Como o posicionamento de qualquer item visual é sempre a partir do canto superior direito, pegamos o posicionamento no eixo y e somamos com a altura da bolinha. Se for maior que a altura do Browser, invertemos a direção no eixo y. Nas linhas 40 a 46, fazemos o mesmo, só que para o eixo x.

É importante notar que o Browser considera que o ponto 0,0 fica no canto superior esquerdo, enquanto que, quando estudamos sobre plano cartesiano, aprendemos que ele fica no centro. Outra diferença é que o eixo x corre na horizontal e cresce para a direita, como esperado. Todavia, o eixo y cresce para baixo. É bem diferente do que aprendemos na escola.

Outro ponto importante é que cada item visual possui seu próprio eixo x e y interno. A bolinha, por exemplo, possui o seu próprio ponto (0,0) que fica no canto superior direito como é possível ver na imagem anterior.

Já conseguimos movimentar a bolinha de um lado para o outro mantendo-a sempre dentro da tela. Ainda não implementamos o sistema de colisão com as barrinhas, mas faremos isso no próximo post.