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.

Deixar uma resposta