Como criar um jogo em HTML e Javascript – Parte 5

Como criar um jogo em HTML e Javascript - Parte 2Esta é a quinta 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 quinta parte iremos aprender a terminar o jogo quando a bola colide com a parte inferior do nosso canvas e a detectar colisões entre a bola e a base.

 

Implementar o fim do jogo

Actualmente a nossa bola consegue andar livremente dentro do canvas e nós já conseguimos mover a base utilizando as setas do nosso teclado. Como todos os outros jogos, ou pelo menos a grande maioria, um jogador deve ser capaz de perder o jogo. Neste caso, se um jogador não conseguir acertar na bola e a deixar tocar na fundo do canvas, então o jogo termina.

Vamos agora implementar o fim do jogo. Abaixo encontra-se um bloco de código criado na terceira parte desta série de tutorias. No código abaixo mudávamos a direcção do movimento da bola sempre que esta colidia com uma das paredes do canvas.

Em vez de mudarmos a direcção do movimento da bola nas 4 paredes do canvas, vamos passar a fazer isso só em três, a superior, a esquerda e a direita. Quando a bola colidir com a parede inferior do canvas, o jogo irá terminar. Para concretizar isto vamos mudar o segundo bloco if, que irá apresentar uma mensagem de fim do jogo e recarregar a página quando a bola colidir com a parte inferior do canvas. Substitui o segundo bloco if pelo bloco if-else abaixo:

 

Colisões entre a bola e a base

Por fim, vamos criar um sistema para detectar colisões entre a bola e a base, isto para que a bola mude a direcção do seu movimento quando colide com a base. A forma mais simples de concretizar isto é verificar a cada loop do jogo se o centro da bola está entre a extremidade esquerda e a extremidade direita da base. Actualize o pedaço de código criado acima para o seguinte:

Se a bola colidir com o fundo do canvas, teremos também de verificar se colidiu com a base. Se também colidiu com a base, então alteramos o seu movimento para que volte para trás. Se não colidiu com a base, então o jogo termina.

O resultado de tudo o que fizemos durante este artigo está representado no gif abaixo:

Fim do jogo - Resultado

 

Download do Código

Pode descarregar o código tal como ele se deve encontrar após a conclusão desta aula no botão abaixo. 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