Dicas

»

Sites

»

Desenvolvimento

Como montar um jogo em HTML 5

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

Por Por Eric Costa, de INFO Online
• 1 de junho de 2010
Como montar um jogo em HTML 5

Tags: Desenvolvimento, Flash, HTML

Vectorstock

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 <body> e </body>, o código <canvas 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 </canvas>. Com isso, já podemos adicionar os comandos de animação, que ficarão num arquivo separado, com extensão JS.

comentários

  • É muito interessante mas, quando baixei não vi os cod canvas como funcionou em meu navegador mesmo sem esses codigos? desculpe se estou um pouco perdido sou novato nesta area.

    Emanuel Rocha • 25/02/2011 - 22:18

  • Não será a morte do Flash.. mas com certeza aplicações básicas do Flash serão substituídas!!

    Helcio Macedo • 10/06/2010 - 06:27

  • Ha controversias... Obvio, ele ira ser aprimorado, mas com os padroes atuais nao acho que seja capaz de substituir o Flash sem perdas. ActionScript eh muito completo, comparavel a C++, com a vantagem das bibliotecas graficas nativas no Flash.

    Henrique Pinheiro • 06/06/2010 - 19:05

  • Quando disseram que era rival do Flash não estavm brincando mesmo.

    Marcos Oliveira • 02/06/2010 - 08:34

  • Agora estou quase satisfeito com esse tal de HTML5. tava achando que não dava pra fazer animações.

    Jardel Alves • 01/06/2010 - 14:30

comente

categorias de dicas

Últimas do como se faz

///
[an error occurred while processing this directive]

cursos em flash

fórum

topo
INFO Online - Copyright © 2012, Editora Abril S.A. - Todos os direitos reservados. All rights reserved.