Olá grandes mortais, nos encontramos mais uma vez nessas rochosas montanhas de informação e criatividade!

E se essa jovem memória não me falha deixamos marcado para este encontro a criação de um pequeno jogo para o Iphone usando HTML 5. Se preparem jovem cavaleiros, arregassarem as mangas, e vamos juntos nos aventurar por algumas linhas de código.

Primeiro vamos equipá-los com o que será necessário para essa aventura, baixem aqui o código fonte da aplicação e trabalharemos comentando em cima deste.

Como vocês puderam perceber a estrutura da pasta do jogo segue o padrão do desenvolvimento web, ou seja, teremos nosso arquivo index em HTML, algumas imagens, estilos, e os arquivos em javascript.

Como o Jack, vamos agora por partes.

INDEX.HTML

Logo no começo deste arquivo temos já algumas tags novas, que são usadas como configuração para a abertura em navegadores mobile.

<meta name=”viewport” content=”user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1″ />
<meta name=”apple-mobile-web-app-capable” content=”yes” />

Um grande problema das aplicações feitas para mobile, é que o mesmo tenta adequar a tela do navegador com Zoom, e quando o usuário trabalha com o Touch ele acaba ‘arrastando’ a página e não dando os efeitos desejados da aplicação. Com estas duas tags indicamos para o navegador já começar com a escala correta, e não permitir o Zoom na página.

Vamos agora deixar nosso jogo mais completo, adicionando uma imagem de Loading e um ícone para quando o usuário adicionar esta página como atalho em seu mobile, este é um detalhe importante, pois em um IPHONE, por exemplo, ao ser criado o atalho nosso jogo ficará igual a uma aplicação nativa deste celular.

<link rel=”apple-touch-startup-image” href=”images/splash.jpg” />
<link rel=”apple-touch-icon” href=”images/splash.jpg”/>

Alguns estilos CSS são criados para personalização da página, o que fica a critério do desenvolvedor e alguns scripts em javascript são incluídos. Que são:

Kinetic – Importante framework de HTML5, que facilita bastante o uso dessas novas funcionalidades.
Kinetic Image – Plugin do Kinetic para manipulação de imagens em HTML5.
jQuery – O sempre querido e amado jQuery.
jQuery Mobile – Plugin para o jQuery que facilita o desenvolvimento mobile.
Game.js – Arquivo com os scripts para o nosso jogo funcionar.

Todas as bibliotecas acima estão linkadas para suas respectivas páginas onde um detalhamento maior e toda a documentação destas estão listadas.

No BODY criaremos três DIVs uma para o rodapé, uma para o conteúdo, e a DIV geral que comportará estas duas. O jQuery Mobile facilita bastante a criação do layout para o mobile, pois ele já conta com muitas funções prontas, de Slider, Button, Listiview, etc.  Neste caso nos limitaremos ao básico: Data-role, que serve para delimitar as seções da página, Page – Container geral, Content – Conteúdo, Footer – Rodapé da página.
E com isso damos por finalizado nosso index.

Como estão essas cabeças criativas depois de todo esse código nobre cavaleiros? Já ganhamos bastante experiência e alguns níveis, mas a batalha ainda não se deu por encerrada, vamos levantar acampamento e continuar nosso desbravamento por esse incrível continente de possibilidades.

Como nosso layout já está montado e configurado, devemos agora usar o poderoso Javascript para darmos movimento e interação para nosso jogo. Deixei o arquivo Game.js totalmente comentado com cada etapa deste pequeno projeto, então peço que vocês acompanhem este livro escrito por essas mãos calejadas (de dígitos) enquanto descrevo com algumas palavras rápidas o funcionamento.

No início foi instanciado algumas variáveis globais que serão usadas durante a aplicação. Após isso pedimos que quando o documento estiver carregado comece a executar algumas funções. Damos início ao objecto Kinetic, que irá nos ajudar bastante no futuro, e já com ele pegamos alguns objetos importantes. Pedimos também que a página seja ajustada conforme o tamanho da tela do usuário e pedimos que a cada troca de tamanho desta seja novamente ajustada. Dizemos que a cada clique ou toque na tela execute uma função, e damos início ao processo de animação, novamente auxiliado pelo Kinetic.

Nesta animação chamamos uma função que cria golds em posições aleatórias conforme o tamanho da tela do usuário, e printa estes com os sprites pré-definidos. Caso o jogador deixe o número de golds na tela ser superior ou igual a 15 damos por finalizado o jogo.

Embainhem suas espadas, sentem em volta da fogueira, e banhem-se no nobre vinho destas terras, pois nosso objetivo foi cumprido companheiros! Acabamos de montar nosso jogo Mobile.

Caso queiram testar este, acessem, pelo navegador ou pelo seu celular:
http://www.douglasdasilva.com.br/pickthegold

Tem muitas melhorias que podem, e devem ser feitas para isso ser realmente um jogo, mas acredito que com este exemplo vocês já serão capazes de seguir adiante e criar trabalhos incríveis. Estou aberto a dúvidas, críticas e sugestões, por favor, sintam-se à vontade e comentem o quanto acharem necessário!

Até a próxima!