Mantido na UEI (Ubiquitous Entertainment, Inc), por membros do Centro de Pesquisa de Akihabara, o framework japonês chamado enchant.js, permite criar com poucas linhas de código um jogo simples em HTML5.
Com enchant.js, você pode criar desde simples jogos 2D até avançados jogos em três dimensões, graças ao suporte WebGL usado como plugin.
Os elementos criados em um bloco do enchant.js são renderizado através do DOM e do Canvas, além de rodar nas plataformas mais conhecidas. Os eventos são voltados para mobile, como o Event.TOUCH_MOVE, disparado quando o usuário toca na tela e a segura. O enchant.js ainda possui uma plataforma com bibliotecas e jogos prontos para serem usados quando quiser.
Sprites
O enchant.js trabalha com sprites para renderizar objetos na tela. Esse recurso tem várias utilidades, como criar um personagem ou mesmo um ambiente. O sprite permite além de renderizar um objeto no DOM ou no Canvas, criar animações com frames a partir de uma imagem sprite. Cada quadro é definido como um índice em um array, iniciado com zero, e com limite máximo da quantidade de imagens. Exemplo:
Isto fará que a imagem passe entre estes sprites em um intervalo de tempo determinado pela propriedade fps do objeto Core (versões mais recentes), e Game (versões anteriores).
O código
Vamos criar um personagem movendo-se em um ambiente usando sprite.
HTML:
JavaScript:
Veja o exemplo no Plunker.
Primeiro chamamos o enchant.js na linha 3. Na linha 4 criamos uma variável para guardar o objeto principal do jogo. Na linha 7, dizemos ao enchant.js o que precisamos carregar antes de iniciar o jogo. Na linha 8 setamos os frames per second do jogo (esta propriedade existe em todos os objetos do enchant.js). Na linha 10 definimos o que acontece quando o enchant.js terminar de carregar os assets. Na linha 12 criamos um novo sprite com largura e altura passadas como argumento. Na linha 13, atribuímos a imagem de fundo, que já foi carregada à propriedade image do sprite background. Na linha 14, adicionamos esse fundo à cena principal (game.rootScene). Na linha 19, criamos uma animação passando as imagens 0 e 1 do sprite. Na linha 22, há o efeito de escala, como no CSS (transform: scale(x, y)), mas com a diferença do terceiro argumento que define o tempo (quanto maior, mais demorado). Na linha 29, obtêm-se o efeito de mover em uma determinada direção em X e Y, definindo como terceiro argumento um tempo. O loop() serve para repetir infinitamente a ação atual.
Adicionando um novo personagem
Que tal deixar nosso jogo mais emocionante e adicionar um inimigo para combater nosso protagonista?
Veja o exemplo com dois personagens no Plunker.
Neste segundo exemplo, temos funções novas:
Class.create()
Este método recebe dois argumentos (classe e objeto). O objeto utiliza a propriedade initialize para executar o objeto quando é criado como um construtor. Outras propriedades funcionam como eventos:
Dentro do initialize, precisamos chamar a classe com call ou apply e seguir o mesmo padrão do exemplo 1 ao criar um objeto.
intersect()
Esta função facilita a nossa vida, detectando uma colisão. Só é preciso usar este método em um objeto e passar ao outro como argumento. Exemplo:
Isto nos poupa de fazer uma lógica como esta:
Apesar deste ser um exemplo simples de como criar um jogo em HTML5, a documentação do enchant.js é bastante completa, e tem muita coisa que permite ser incorporada para tornar nosso exemplo mais dinâmico e interativo.
Confira mais demos no site, os tutoriais e os jogos já desenvolvidos com a plataforma.