Como tudo evolui, aqui vamos nós para mais uma aposta sendo que estamos tendando entrar em novas áreas, evoluindo com as novas tecnologias.Hoje venho tentar sintetizar e explorar uma nova forma de interatividade que a criação de jogos em Html5 uma grande concorrente ao flash, da Adobe, ao Silverlight, da microsoft, e ao recente JavaFX, da Sun.Que pelo comentário de seus idealizadores que as tecnologias viabilizadas pelo HTML5como o Canvas para desenhos 2D e o armazenamento de conteúdos no desktop, permitirão que usemos mais o browser do que nunca.

Mais chega de enrolar, agora vou da umas dicas de como utilizar o HTML5 para fazer um joguinho simples...Para maior compreendimento e preciso que você siga alguns passos.

Agora vamos para o que realmente interessa que os passos para a construção do Game em HTML5.

1º) Criação da Tags

Antes de tudo, crie uma página HTML e adicione a seu corpo, entre as tags entre <> e < / body > o código

< id="canvas" width="300" height="300">/canvas >

. 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º)Criando Objetos

Com o canvas definido, vamos criar algumas funções auxiliares para facilitar os desenhos.Antes criamos uma varialvel para termos acesso ao recursos 2D no Canvas, com o código:

var canv2D=$('#canvas')[0].getContext("2d");

Depois de definir a variavel para usar o 2D, vamos desenhar um objeto em forma de circulo:

functin circle(x,y,r)

{canv2D.beginPath();

canv2D.arc(x,y,r,0,math.

PI*2,true);

canv2D.closePath();

canv2D.fill();}

Pronto criamos um circunferência fechada e a preenche com uma cor.

3º)Criando Movimentos

Para criarmos movimentos em jogos simples e em 2D,basta criar um Loop de desenho que refaz a área do game atualizando as posições dos itens.

Para fazer isto vamos usar a função draw() que recriará todos os elementos, mais para se criar o loop devemos definr a função init(), que e executada na inicialização do canvas , nela vamos colocar o comando intervalold(draw,10), traduzindo

a linha de código que a cada 10 milissegundos a função de desenho será executada.

Continua, data da provável postagem será dia 12/09/10.