Como criar um jogo em HTML e Javascript – Parte 6

Como criar um jogo em HTML e Javascript - Parte 2Esta é a sexta parte da série de tutoriais “Como criar um jogo em HTML e Javascript” onde ensino passo a passo como criar um jogo em HTML e Javascript puro. Nesta sexta parte vamos criar e desenhar vários tijolos no ecrã. O jogador terá como objectivo destruir estes tijolos, acertando com a bola neles.

  

Variáveis dos tijolos

Iremos necessitar de um array de duas dimensões para armazenar todos os tijolos do jogo. Mas antes disso vamos criar algumas variáveis que definem alguma informação importante sobre o tijolos, tais como a altura, largura, número de linhas e de colunas. Adicione o código abaixo junto das outras variáveis globais do seu código.

Acima nós definimos o número de linhas e colunas de tijolos, a sua altura e largura, o espaçamento entre tijolos (para que estes não toquem uns nos outros) e uma distância do topo e da esquerda para que os tijolos não comecem a ser desenhados exactamente na extremidade superior esquerda do canvas. Abaixo fica uma representação do significado das variáveis acima para que entenda mais facilmente.

Variáveis dos tijolos

Como podemos comprovar pela imagem acima, as minhas habilidades de paint não são definitivamente as melhores.

Adiante, nós vamos guardar os nossos tijolos num array bidimensional. Esse array vai conter a coluna do tijolo (c), que por sua vez vai conter a linha do tijolo (l). Uma par desse array (coluna, linha) irá conter um objecto que representa a posição onde o tijolo deverá ser desenhado no ecrã. Adicione as seguintes linhas de código abaixo das suas variáveis globais:

O código acima irá percorrer as linhas e as colunas e criar novos tijolos. Os objectos contidos no array acima serão também posteriormente utilizados para detectar colisões entre os tijolos e a bola.

 

Lógica de desenho dos tijolos

Agora que já temos o nosso array de tijolos, vamos criar uma função que irá percorrer todos esses tijolos e desenha-los no ecrã. Uma função que cumpriria estes requisitos poderia ser a seguinte:

A função acima percorre todas as linhas e todas as colunas do array de tijolos, define uma posição x e y para cada tijolo e depois pinta-os no canvas. O problema na solução acima é que estamos a pintar todos os tijolos na mesma posição, nas coordenadas (0,0). Vamos então adicionar mais duas linhas de código que irão calcular a posição apropriada de cada tijolo tendo em conta a sua linha e a sua coluna:

A posição x de cada tijolo (tijoloX) é calculada como tijoloLargura + tijoloEspacamento, multiplicado pelo numero da coluna (c) mais o tijoloDistEsquerda. A posição de y de cada tijolo é calculada de forma semelhante, mas em vez de ser calculada em função da coluna é calculada em função da linha. Com estas linhas de código seremos capazes de colocar cada tijolo na sua posição correcta.

Vamos agora actualizar a função desenhaTijolos() para que seja considera a posição correcta de cada tijolo tendo em conta a sua linha e a sua coluna. Altere o código da sua função desenhaTijolos() para o seguinte código:

 

Desenhar os tijolos

Por fim basta-nos chamar a função desenhaTijolos() dentro da função desenha() para que os tijolos sejam efectivamente desenhados no ecrã. Adicione a seguinte linha de código entre a linha que limpa o canvas e a chamada à função desenhaBola().

Depois da conclusão deste artigo o seu jogo deverá ser semelhante à representação no gif abaixo:

Jogo com tijolos - preview

 

Download do Código

O código, tal como se encontra após a conclusão de tudo o que foi escrito neste tutorial, encontra-se disponível gratuitamente para download no botão abaixo. O código abaixo está altamente comentado para que perceba todas a etapas de criação do jogo.

Download

Tem dúvidas? Sugestões? Então deixe um comentário abaixo.

Este tutorial está dividido em 10 partes.

Deixar uma resposta