Como criar um jogo em HTML e Javascript – Parte 3

Como criar um jogo em HTML e Javascript - Parte 2Esta é a terceira 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. Esta série de tutoriais requer apenas conhecimentos básicos de HTML e JavaScript. Nesta terceira parte iremos criar um sistema de detecção de colisões simples.Pode descarregar o código fonte como ele será após este tutorial, clicando no botão “Download” no fim desta página. O código encontra-se altamente comentado para que perceba todas as etapas.

 

Sistema de Detecção de Colisões.

Se conseguiu concluir todos os passos do post anterior com sucesso então já terá conseguido criar uma bola com movimento. É bom ver a nossa bola mover-se, mas ela rapidamente desaparece do ecrã, o que não é muito interessante.

Para detectar colisões vamos verificar em cada loop do jogo se a bola está em contacto (a colidir) com a parede, e se sim, iremos alterar a direcção do movimento da bola.

Comece por adicionar uma nova variável que irá guardar o raio do circulo desenhado, isto irá facilitar alguns cálculos futuros. Pode adicionar esta variável abaixo das declarações das outras variáveis:

Agora deve actualizar também a linha que desenha a bola dentro da função desenhaBola() como mostro abaixo:

 

Colisão com o topo e o fundo do canvas

Existem quatro paredes onde a bola deverá colidir. Primeiro iremos focar-nos na parede do topo. Precisamos de verificar a cada frame (loop) do jogo se a bola está a colidir com a borda superior do canvas. Se sim, iremos inverter o movimento da bola para que ela comece a mover-se em sentido contrário, forçando assim que esta permaneça na parte visível do canvas. Devemos-nos lembrar que o sistema de coordenadas do canvas começa no topo esquerdo o que implica que a borda do topo do canvas seja na posição y=0. A solução poderá ser algo deste género:

Se a posição y da bola for menor do que zero, muda o sentido do movimento no eixo dos yy, mudando o sinal da velocidade nesse eixo. Se a bola estava a mover-se para cima com a velocidade de 2 pixels por frame, então passará a mover-se para cima com a velocidade -2 pixels por frame, o que na realidade é mover-se para baixo com velocidade de 2 pixels por frame.

O código acima trata da colisão com a borda superior do canvas, por isso agora é fácil de pensar na solução para a borda inferior:

Se a posição y da bola for maior do que a altura do canvas, muda o sentido do movimento no eixo dos yy, mudando o sinal da velocidade nesse eixo.

Podemos agora juntar ambas as instruções para aumentar a qualidade do nosso código:

 

Colisão na esquerda e na direita

Uma vez que já temos os problemas da borda superior e inferior resolvidos, por analogia podemos encontrar uma solução para as bordas esquerda e direita. Tudo o que precisamos de fazer é repetir as instruções acima mas desta vez para o eixo dos xx. O resultado final será:

 

O código acima deve ser inserido dentro da função desenha() antes da posição da bola ser actualizada, ou seja antes das linhas x += dx; y += dy;

O resultado do exercício acima será parecido com o gif abaixo:

Resultado do Jogo em HTML e Javascript

 

A bola entra um pouco dentro das paredes

Se testares o teu código ou se observares com atenção a animação acima vais perceber que a bola entra um pouco dentro das paredes antes do seu movimento ser invertido.

Isto acontece porque nós estamos a detectar colisões entre o centro da bola e as paredes do canvas, a abordagem correcta será detectar colisões entre a circunferência das bola e as paredes do canvas. Por isso vamos ajustar as nossas instruções de forma a corrigir isto. Actualize o último código que adicionou para o seguinte:

Quando a distância entre o centro da bola e uma parede do canvas é a mesma que o raio das bola, então devemos mudar a direcção do movimento desta. Ao subtrair o raio do lado direito e no inferior e ao adicionar no lado esquerdo e superior teremos uma impressão de colisão apropriada.

O resultado final num gif:

Resultado do Jogo em HTML e Javascript - Colisões apropriadas

Clique no botão abaixo para fazer o download dos arquivos criados durante este tutorial.

Volto a referir que o código 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