Jogos para Web sem calorias e sem açúcar

Submitted by robson on dom, 30/05/2010 - 01:55

No último dia 27 o Google resolveu homenagear o jogo Pac-Man, que completou 30 anos. Normalmente essa homenagem consiste em mudar o logo do Google para algo relacionado ao homenageado.
Desta vez o Google surpreendeu: em vez de uma simples alteração no logo, fez um clone do Pac-Man.
Para ter o máximo de compatibilidade possível o jogo foi feito usando apenas recursos padrões da Web, como HTML, CSS e Javascript. Flash foi utilizado apenas para o som. O jogo ficou incrível e pode ser conferido aqui.

Mas será possível fazer jogos usando apenas HTML, CSS e Javascript?

A resposta é: mais ou menos. O HTML 5 ainda não está totalmente maduro e, para complicar ainda mais, nem todos os browsers são compatíveis com ele. Isso é ainda mais complicado para o "líder" de mercado: o Microsoft Internet Explorer. Se em testes de compatibilidade como o Acid3 o IE tem desempenho pífio, tente imaginar como o IE vai lidar com coisas como as tags canvas e video. Claro que as coisas estão beeem melhores porque o IE 6 está morto e enterrado (será?). Mas ainda falta chão para o IE se adequar aos padrões da Web.

Quando o HTML 5 se tornar mais comum, as coisas podem ficar mais interessantes. Por enquanto, o ideal é não abusar nos recursos de folhas de estilo. No que diz respeito ao Javascript, o uso de bibliotecas como jQuery é fundamental para manter a melhor compatibilidade entre navegadores.

Ainda assim, um dos aspectos que ainda não está resolvido para o uso de padrões Web para jogos é a questão do som. O Google usou Flash, que não funcionará nos produtos portáteis da Apple com a chegada do iPhone OS 4. Há outras maneiras de contornar isso, mas falo isso em outro post.

Este será o primeiro post de uma série sobre jogos para web que não utilizam outras tecnologias a não ser:

• HTML 4 / 5
• CSS 1.1 / 2 / 3
• Javascript

A idéia é apresentar jogos simples, sem som (pelo menos os primeiros) e que demonstrem que dá para construir jogos simples e divertidos usando poucos recursos e com bastante portabilidade.

Para demonstrar isso, um jogo clássico: Pong. O código do jogo está disponível para download aqui.

Comandos:

Raquete da Esquerda: W e S
Raquete da Direita: I e K

O jogo também pode ser jogado logo abaixo:

O jogo não ficará 100% no Internet Explorer. Quem quiser alterar, colocar no seu site, etc. fique a vontade.

Nos próximos "episódios" teremos:

• Uso da tag canvas
• CSS Sprites
• Uso do mouse
• Outras formas de conseguir som

Atualização: O padrão HTML 5 contempla uma tag chamada audio. Vou investigá-la com calma e ver como ela vai funcionar (ou não).