Na primeira parte deste artigo nós abordamos conceitos iniciais acerca do desenvolvimento do jogo usando Canvas, atrelado à HTML5, JavaScript e CSS3. Essa introdução foi muito importante para que o leitor consiga se adaptar à forma como o Canvas não só impõe sua arquitetura de camadas, mas também a como ele lida com as funções de script para expor o conteúdo e gerenciar o “desenho” gráfico das diversas formas do jogo.

Até o momento criamos três atores principais: o plano de fundo (e seu efeito de movimento, dando a ideia de cenário infinito), o player e os combos de ataque. Além disso, alguns conceitos físicos foram aplicados, muitos deles abstraídos pela própria linguagem, e continuarão sendo abordados até o fim da implementação, haja vista a necessidade de incutir tais efeitos em quase todos os personagens.

Na segunda parte do artigo focaremos no restante do desenvolvimento, que consiste em criar os inimigos e adicionar os efeitos de animação, identificar a colisão dos combos de ataque entre ambos os atores, adicionar sonorização, implementar as funções que irão randomizar a exibição dos inimigos e players, etc. A partir de agora, faremos referência às figuras do pool de objetos e repositórios de forma mais frequente, uma vez que quanto mais objetos precisarem ser criados, maior o processamento que ocorrerá na instanciação desse tipo de estrutura de dados.

Criando os inimigos

A primeira mudança significativa para criar os inimigos, assim como fizemos para os demais objetos Image, é inserir as referências aos objetos e instanciá-los. Lembre-se que o objeto repositorio funciona como uma espécie de contêiner em memória que pré-carrega as variáveis e objetos antes que eles sejam requisitados pelas respectivas funções e exibidos na tela. Isso alivia o processamento e impede que travamentos e lentidão aconteçam em tempo de jogo. Veja na Listagem 1 o código que usaremos para efetuar essa mudança.

Listagem 1. Adicionando os objetos de inimigo e combo no objeto repositorio.

  01 /**
  02  * Define um objeto para manter todas as nossas imagens do jogo para 
  03  * evitar que elas sejam criadas mais de uma vez.
  04  */
  05 var repositorio = new function() {
  06     // Define os objetos de imagens
  07     this.planofundo = new Image();
  08     this.player = new Image();
  09     this.combo = new Image();
  10     this.inimigo = new Image();
  11     this.comboInimigo = new Image();
  12 
  13     var numImagens = 5;
  14     var numCarregados = 0;
  15     function imgCarregada() {
  16           numCarregados++;
  17           if (numCarregados === numImagens) {
  18                  window.iniciar();
  19           }
  20     }
  21     this.planofundo.onload = function() {
  22           imgCarregada();
  23     }
  24     this.player.onload = function() {
  25           imgCarregada();
  26     }
  27     this.combo.onload = function() {
  28           imgCarregada();
  29     }
  30     this.inimigo.onload = function() {
  31           imgCarregada();
  32     }
  33     this.comboInimigo.onload = function() {
  34           imgCarregada();
  35     }
  36     
  37     // Configura os caminhos (src) das imagens
  38     this.planofundo.src = "imgs/pf.png";
  39     this.player.src = "imgs/player1.png";
  40     this.combo.src = "imgs/combo1.png";
  41     this.inimigo.src = "imgs/enemy1.png";
  42     this.comboInimigo.src = "imgs/combo2.png";
  43 }

As configurações previstas inicialmente para os demais objetos permanecem. Nas linhas 10 e 11 declaramos e instanciamos os objetos inimigo e comboInimigo, respectivamente, que servirão para guardar ...