Faça seu próprio game em HTML5

Conheça os principais passos e as técnicas para criar desenhos e animações com o recurso rival do Flash

Apesar de ainda não ser suportado por todos os browsers populares nem contar com uma definição final aceita pelo W3C (World Wide Web Consortium), entidade responsável pelos padrões da web, o HTML 5 vem ganhando popularidade. Prova disso é que até o próprio Adobe Flash, na versão CS5, passou a contar com ferramentas para exportar animações para o mecanismo de desenho do HTML 5, definido na tag canvas. Neste tutorial, vamos montar um joguinho bem simples, no estilo do antigo Arkanoid, para demonstrar os principais passos e técnicas para criar desenhos e animações com a nova tag para vetores. A versão final do código está disponível em www.info.abril.com.br/downloads/jogo-canvas-html5. A seguir, confira o passo a passo e explore um das principais novidades do HTML 5.

1. Criação da tag
Antes de tudo, crie uma página HTML e adicione a seu corpo, entre as tags e , o código. Note que esse código cria uma tela com 300 pixels de altura e largura, mas não mostra elemento algum caso o browser não seja capaz de exibir o jogo. Para mostrar alguma mensagem, basta colocar o texto antes de . Com isso, já podemos adicionar os comandos de animação, que ficarão num arquivo separado, com extensão JS.

2. Os primeiros desenhos
Com o canvas definido, vamos criar algumas funções auxiliares para facilitar os desenhos. Antes de tudo, criamos uma variável para acesso ao recurso de desenho 2D no canvas, com o código:

var canv2D = $(‘#canvas’)[0]. getContext(“2d”);

Depois, usamos o seguinte código para desenhar um objeto em forma de círculo:

function circle(x,y,r)
{canv2D.beginPath();
canv2D.arc(x, y, r, 0, Math.
PI*2, true);
canv2D.closePath();
canv2D.fill();}

Não há muito segredo, a função apenas cria uma circunferência fechada e a preenche com uma cor.

3. Criando movimentos
A regra geral para movimento, em jogos simples e em duas dimensões, é criar um loop de desenho, que refaz a área do game, atualizando as posições dos itens. Aqui, faremos a mesma coisa: a função draw() recriará todos os elementos. Para criar o loop, devemos definir a função init(), que é executada na inicialização do canvas. Nela, coloque o comando intervaloId = setInterval(draw, 10). Isso garante que a cada 10 milissegundos a função de desenho será executada.

4. Hora de integrar o mouse
O jogo precisa de tratamento para as ações do teclado e do mouse. Para o primeiro caso, devemos implementar a função onKeyDown(evt). Ela recebe, na váriavel evt, a tecla pressionada pelo usuário, que pode ser tratada no código.
Se quisermos interromper o movimento quando a tecla é solta, devemos também implementar onKeyUp(evt). Para as setas esquerda e direita, o código recebido em evt é 37 e 39, respectivamente. Para o mouse, devemos usar o evento onMouseMove(evt), que funciona de forma semelhante ao teclado, mas com evt recebendo o valor da posição do mouse na tela.

5. Vetor de tijolos
Para completarmos os elementos gráficos do tutorial, devemos criar um vetor que armazenará os tijolos que deverão ser quebrados para ganhar o jogo. Esse vetor tem apenas um número, que é 1, se o tijolo ainda não foi atingido, ou 0, caso contrário. Com isso, a função draw() deve mostrar na tela apenas os tijolos cujo valor seja 1. Se não houver mais tijolos com esse valor, o jogador venceu.

6. Ajustes finais
Depois de criar os elementos básicos é preciso fazer os tratamentos próprios de movimentação, usando duas variáveis, dx e dy, para indicar a velocidade horizontal e ver tical, além de variar as cores dos tijolos, usando um vetor auxiliar que alterna as tonalidades. Também é impor tante tratar o caso de erro do jogador, no momento em que ele não pega a bolinha. Nesse tutorial, em caso de falha, interrompemos a animação, limpando a variável inter valID criada anteriormente com o comando clearInter val (inter valoId).

GRÁFICOS (QUASE) SEM CÓDIGO
Quer montar gráficos interativos e sem usar Flash? Uma opção para HTML 5 é o RGraph. Com poucas linhas de código dá para criar gráficos bacanas e com opções de zoom, legendas dinâmicas, entre outros recursos.

QUAKE RENASCE COM O CANVAS
Para mostrar o poder do HTML 5, o pessoal do Google criou uma versão do game de tiro Quake 2, originalmente lançado em 1997, que roda direto no browser sem precisar de plug-ins. Infelizmente, o projeto ainda não está no ar e tem de ser instalado manualmente por quem quiser jogar. Ainda no mundo dos games, outro projeto de destaque é Jsnes, um emulador online feito em HTML 5 e JavaScript, que roda os games do antigo Nintendo 8 bits.