Como criar um jogo em HTML e Javascript – Parte 2

Como criar um jogo em HTML e Javascript - Parte 2Esta é a segunda parte da série de tutoriais ” Como criar um jogo em HTML e Javascript ” onde irei ensinar passo a passo a criar um jogo em HTML e Javascript puro. Antes de iniciar devo referir que este tutorial requer apenas conhecimentos básicos de HTML e Javascript. Nesta segunda parte da série de tutoriais iremos aprender a animar os objectos do canvas criámos anteriormente. No fim de cada tutorial irei disponibilizar os ficheiros criados durante o mesmo para download.

 

Como criar um jogo em HTML e Javascript – Animação de Objectos.

Bem, se leu o artigo anterior já deve saber criar uma bola no <canvas> e por isso neste artigo iremos coloca-la em movimento. Teoricamente o movimento da bola funciona da seguinte forma.

  1. Desenhamos a bola na posição (x, y);
  2. Limpamos o conteúdo do nosso ecrã (o canvas);
  3. Voltamos a desenhar a bola numa posição ligeiramente diferente (x+1, y+1);

Ao voltarmos a desenhar a bola numa ligeiramente em cada frame, iremos criar uma impressão de movimento que será transmitida ao internauta. Este conceito é o mesmo utilizado no cinema em que varias imagens ligeiramente diferentes umas das outras são mostradas ao espetador a grande velocidade (normalmente  a 60 frames/imagens por segundo).

Para actualizarmos constantemente o canvas a cada frame, precisamos de definir uma função para desenhar que irá correr infinitamente (até o jogo terminar), sendo que esta função irá ter variáveis com valores diferentes a cada execução para que os objectos sejam desenhados em posições ligeiramente diferentes a cada frame do jogo. Para corrermos uma função infinitamente temos duas opções viáveis, as funções setInterval() e requestAnimationFrame() do javascript, sendo esta última a mais recomendada visto que permite uma melhor performance a gráfica.

Para começarmos a programar, vamos apagar todo o código que já tínhamos criado anteriormente no ficheiro jogo.js deixando só as seguintes linhas.

Agora adicione o seguinte código no fundo do ficheiro jogo.js.

Devido à natureza da função setInterval(), a função desenha() será chamada uma vez a cada 10 milissegundos para sempre ou até nós pararmos este efeito. Agora adicione as seguintes linhas de código dentro da função desenha().

Com o código acima estamos a desenhar uma bola no ecrã, sendo que cada vez que a função desenha() é executada, esta bola é desenhada de novo ou seja, estamos a desenhar uma bola a cada 10 milissegundos. O resultado obtido deverá ser o seguinte.

Bola

Nós não notamos que a bola é pintada constantemente a cada 10 milissegundos uma vez que ela não se encontra em movimento. O passo seguinte será mudar isso e coloca-la em movimento. Em primeiro lugar, em vez de colocarmos a bola numa posição fixa em (50,50) vamos definir uma posição de inicio no fundo do nosso canvas (em altura) e a meio deste (em largura), sendo que esta posição irá ficar armazenada nas variáveis x e y, e serão estas as variáveis que iremos passar como parâmetro para a função que desenha a nossa bola.

Adicione as duas linhas seguintes no topo do ficheiro jogo.js depois da declaração da variável contexto.

De seguida mude a função desenha() para utilizar as variáveis x e y na função arc() como mostra a linha de código destacada abaixo.

Agora vem a parte mais importante, nós temos de adicional um pequeno valor às variáveis x e y cada vez que a função desenha() é executada para parecer que a bola se encontra em movimento. Para isso vamos declarar duas novas variáveis, dx e dy às quais iremos atribuir os valores 2 e -2 respectivamente. Adicione o código seguinte abaixo da declaração das suas variáveis x e y.

A última tarefa a completar é actualizar as nossas variáveis x e y com os nossos valores dx e dy a cada execução da função desenha(), desta forma a nossa bola será desenhada numa nova posição em cada frame. Note que uma execução da função desenha corresponde a um frame. Adicione as duas linhas de código destacadas abaixo ao fundo da sua função desenha().

Guarde o seu código e abra o ficheiro index.html no seu brower. O resultado deve ser o seguinte.

bola em movimento

Como verificamos na imagem acima, a bola está a deixar um rastro por onde passa. Isto acontece porque nós estamos a pintar uma nova bola em cada frame sem remover a bola anterior. Existe um método para limpar o conteúdo do elemento <canvas>, esse método é o clearRect(). O método clearRect() recebe quatro parâmetros, as coordenadas x e y do canto superior esquerdo do rectângulo e as coordenadas x e y do canto inferior direito do rectângulo. Toda a área coberta por este rectângulo será apagada ou seja todo o conteúdo desenhado anteriormente nessa área será apagado. Adicione a linha destacada abaixo à sua função desenha().

Guarde o seu código e volte a abrir o ficheiro index.html no seu browser. Desta vez deverá ver a bola em movimento mas sem deixar um rastro por onde passa.

bola sem rastro

Nos próximos artigos iremos adicionar uma quantidade enorme de comandos à função desenha() e portanto é bom mantermos o nosso código limpo, simples  e fácil de entender. Por este motivo vamos mudar o código responsável por desenhar a bola para outra função. Substituía a sua função desenha() pelas duas funções seguintes.

Bem, vamos terminar por aqui este segundo tutorial da série ” Como criar um jogo em HTML e Javascript “. Na próxima parte desta série de tutoriais vamos colocar a bola a movimentar-se dentro do canvas sem que esta desapareça.

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

Download

Se tiver dúvidas deixe um comentário abaixo!

Este tutorial está dividido em 10 partes.

Daniel Oliveira

Daniel Oliveira, 21 anos, vive em Lisboa e é estudante de engenharia informática no Instituto Superior Técnico. Adora desporto principalmente paintball, football, golf, kitesurfing, surfing, downhill mountain biking, rafting, zorbing e rock climbing. Apesar dos conteúdos do blog não joga nem gosta de jogar jogos de computador.

Deixar uma resposta

Este site utiliza o Akismet para reduzir spam. Fica a saber como são processados os dados dos comentários.