Como criar um jogo em HTML e Javascript – Parte 7

Como criar um jogo em HTML e Javascript - Parte 2Esta é a sétima 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 sétima parte vamos completar o nosso sistema de colisões, de forma a detectar o contacto entre a bola e os blocos (tijolos) do jogo.

  

Função de detecção de colisões

Para tornar o nosso tutorial simples, vamos verificar se o centro da bola está a colidir com algum dos blocos do jogo. O resultado desta forma de detectar colisões não será sempre perfeito, na realidade existe métodos mais sofisticados que apresentam melhores resultados. Mas para este tutorial irá servir, uma vez que pretendo apenas mostrar os conceitos básicos na criação de um jogo.

Nós precisamos de criar uma função de detecção de colisões que percorra todos os blocos do jogo e que compare a posição do bloco com a posição da bola, a cada frame do jogo. Para tornar o código mais elegível, vamos definir uma variável tijolo que irá guardar o objecto tijolo em cada iteração da função. A nossa função detectaColisoes() deverá ter os aspecto abaixo:

Para concluir a função acima, precisamos de saber se o centro da bola está dentro de algum dos nossos tijolos. Se sim, vamos mudar a direcção da bola. Se não, então não fazemos nada.

Para que o centro da bola esteja dentro de um dos tijolos, as seguintes condições têm todas de ser verdadeiras:

  • A coordenada x da bola é maior que a coordenada x do tijolo;
  • A coordenada x da bola é menor que a coordenada x do tijolo mais a sua largura;
  • A coordenada y da bola é maior que a coordenada y do tijolo;
  • A coordenada y da bola é menor que a coordenada y do tijolo mais a sua altura.

Vamos agora aplicar as condições acima em código Javascript.

Adicione o bloco de código acima, abaixo da função trataTeclaCima().

 

Destruir o blocos após colisões

O código acima deverá funcionar como desejamos e irá mudar a direcção da bola após uma colisão com um bloco. Mas está-nos a faltar algo. Os blocos ainda não são destruídos. Para concretizar isto, vamos adicionar um parâmetro extra a cada bloco que vai indicar se pretendemos ou não que ele seja desenhado no ecrã. No bloco de código onde os tijolos são iniciados, adicione uma nova propriedade estado. Actualize o seguinte bloco de código como mostrado na linha em destaque.

Agora, antes de desenharmos cada tijolo, temos de verificar a sua propriedade estado de dentro da função desenhaTijolos(). Caso o estado do tijolo seja 1, estão este deverá ser desenhado. Caso contrário, se o valor do estado é 0, isto significa que o tijolo foi destruído pela bola e nesta situação não o queremos desenhar no ecrã. Actualize a sua função desenhaTijolos() como mostrado nas linhas em destaque abaixo:

 

Actualizar o estado de cada tijolo

Dentro da função detectaColisoes(), nós vamos queres detectar colisões apenas com os tijolos que estão activos (estado = 1), vamos também querer colocar o estado do bloco a 0 sempre que este colidir com a bola. Actualize a sua função detectaColisoes(), como mostrado nas linhas em destaque abaixo:

 

Activar a detecção de colisões

Por fim, para que tudo o que criamos acima comece a funcionar, basta-nos chamar a função detectaColisoes() dentro da função desenha(). Adicione a seguinte linha de código dentro da função desenha() abaixo da chamada à função desenhaBase():

O resultado do jogo, após a conclusão deste tutorial deverá ser o seguinte:

Jogo - Resultado parte 7

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. Recomendo que o descarregue e leia com atenção, pois este encontra-se 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