Atualmente, uma imensa maioria das aplicações que encontramos nas lojas da Play e App Store correspondem a aplicativos desenvolvidos usando somente HTML5 e JavaScript. Essa ampla adoção de duas tecnologias deveras comuns se deve às cada vez mais frequentes adoções por parte dos desenvolvedores de frameworks multiplataforma como o Cordova, PhoneGap, etc. que usam a tecnologia HTML5 como base e simplificam, consideravelmente, a criação e manutenção de aplicativos móveis e distribuídos.

Aliada a tais fatores, encontra-se também uma preferência exponencial por aplicações que visam o entretenimento, como jogos, players e derivados. E quando se trata de jogos, as estatísticas mostram que os desenvolvidos sob a ótica 2D (bidimensionais), que em sua grande maioria são bem mais simplistas e diretos, ganham a preferência dos usuários em disparado.

Ao mesmo tempo, do ponto de vista técnico, eles também são mais simples de desenvolver em comparação aos jogos 3D, o que acaba criando uma gama maior de possibilidades para as empresas.

Para possibilitar maior flexibilidade e rapidez no desenvolvimento de jogos para esse público, as empresas, por sua vez, optam cada vez mais pela HTML5 como opção barata, fácil de utilizar e que consome menos recursos em se tratando de ferramentas, softwares proprietários e/ou de terceiros, bem como por sua desnecessidade de ambientes complexos e uso de mais de uma linguagem de programação.

Tudo isso é possível através do recurso que a tecnologia apresenta chamado Canvas, que são elementos da HTML5 que possibilitam a “pintura” de todos os tipos de gráficos, desde simples linhas até gráficos mais complexos, tendo como base a linguagem JavaScript.

Neste artigo, nós aprenderemos os recursos do Canvas e como ele se integra ao trio HTML5, CSS e JavaScript através da criação de um jogo no estilo shoot ‘em up, um gênero de jogos para computador em que o personagem principal se concentra em atirar nos alvos (inimigos) em cenários horizontais, de modo que outros aspectos do jogo são simplificados para facilitar tudo isso. No mesmo jogo, também criaremos pontuações, a possibilidade de reiniciar a partida caso o player seja atingido, um botão para silenciar a música de fundo, assim como a geração de cenários e players de forma randômica, para deixar o jogo mais interessante.

Os personagens serão baseados em um jogo de guerra, com soldados futuristas contra os monstros espaciais que invadiram a terra.

Para controlar o player serão usadas as teclas de navegação do teclado (←↑↓→), que permitirão mover o mesmo por toda a tela, dentro do perímetro máximo que determinarmos para ele (vamos criar uma barreira invisível para que o player não chegue muito perto dos inimigos, e vice-versa); e para atirar será usada a tecla de barra de espaço do teclado.

O jogo irá rodar enquanto o jogador não morrer, e o placar será incrementado sem fim, consequentemente; até que o mesmo seja atingido por um dos inimigos (que também virão infinitamente). Neste jogo, não implementaremos recursos como vidas, pausa ou aumento da dificuldade com o tempo, mas são recursos que o leitor estará apto a desenvolver após este artigo.

O ambiente para desenvolvimento é bem simples, basta ter um editor de texto e um navegador web de sua preferência. É recomendável usar algum editor que reconheça arquivos de extensões .html e .js, como o Notepad++ (vide seção Links). Mas antes de começarmos a implementação de fato, vamos entender melhor o que são Canvas e como eles funcionam.

Canvas

A HTML5 disponibiliza em sua lista de tags básicas, a tag <canvas>. Através dela, os desenvolvedores front-end tem em mãos um poderoso recurso para desenhar grafos, gráficos de jogos ou outras imagens visuais em tempo real, u ...