HTML5/JavaScript para Jogos (Parte 10)

Se você perdeu a parte anterior, acesse-a aqui: Parte 9

Nesta parte, vamos ler todas as direções de movimento da spritesheet (que não estão bem alinhados, como vocês vão ver) e vamos alterar a direção do personagem de acordo com a seta pressionada no teclado.

Então, primeiro, vamos acrescentar algum código, como a seguir

DIR_S= 0;
DIR_SW = 1;
DIR_W= 2;
DIR_NW = 3;
DIR_N = 4;
DIR_NE  = 5;
DIR_E = 6;
DIR_SE = 7;

var dir = DIR_S;
...
var x2 = 0;
var dx2 = 0;
var sx;
var sy;
var spritesheet2;
var boyAnimUp = [];
var boyAnimDown = [];
var boyAnimLeft = [];
var boyAnimRight = [];

...

  spritesheet2.onload = function() {

    sx = canvas2.width-spritesheet2.width;
    sy = canvas2.height-spritesheet2.height;
    
    ctx2.drawImage(spritesheet2, canvas.width-spritesheet2.width, canvas.height-spritesheet2.height);
  
    for (currentSprite=0; currentSprite<3; currentSprite++)
    {
      boyAnimDown.push(ctx2.getImageData(sx, sy+(84*currentSprite), 68, 84));
      boyAnimUp.push(ctx2.getImageData(sx+68, sy+(84*currentSprite), 68, 84));
      boyAnimLeft.push(ctx2.getImageData(sx+136, sy+(84*currentSprite), 68, 84));
      boyAnimRight.push(ctx2.getImageData(sx+(3*68), sy+(84*currentSprite), 68, 84));
    }

    currentSprite = 0;
    requestAnimationFrame(secondLoop);
  };

Aproveitamos as variáveis de direção que já estavam sendo usadas no primeiro canvas (linhas de 1 a 10) e declaramos novos vetores, um para cada direção do personagem (linhas 17 a 20). Depois, na função chamada após o carregamento de spritesheet2, no mesmo laço for que tínhamos antes, lemos as três imagens de cada direção, gravando no vetor correspondente. Novamente, determinei os valores do tamanho de cada sprite empiricamente e, como vamos ver na animação, a spritesheet não está bem alinhada, pois a animação apresentará alguns movimentos que não deveria.

Então, vamos aumentar a função que trata as teclas pressionadas, document.onkeydown, que já modificamos na Parte 6, da seguinte forma

document.onkeydown = function(e) {
  switch (e.keyCode) {
  case 38:	
    dir = DIR_N;
    moving = true;
    break;
  case 37:
    dir = DIR_W;
    moving = true;
    dx2 = -3;
    break;	
  case 39:	
    dir = DIR_E;
    moving = true;
    dx2 = 3;
    break;
  case 40:
    dir = DIR_S;
    moving = true;
    break;
  }
};

A função anterior, que é chamada quando uma tecla é pressionada, trata qual seta foi pressionada e altera o valor da variável dir para a direção correspondente. Lembre-se que os códigos das teclas são os seguintes

Tecla	Código
seta para esquerda	37
seta para cima	38
seta para direita	39
seta para baixo	40

Finalmente, o valor de dir é lido na função que redesenha o canvas para usar o vetor de sprites da direção correspondente, conforme a estrutura switch no trecho de código a seguir

function secondLoop(timestamp) {
...
  if (spriteChangeCounter == 10)
  {
    spriteChangeCounter = 0;
    currentSprite++;
  }
  else
  {
    spriteChangeCounter++;
  }
  
  switch(dir)
  {
    case DIR_N:
      ctx2.putImageData(boyAnimUp[currentSprite%3], 0, 240);
      break;
    case DIR_S:
      ctx2.putImageData(boyAnimDown[currentSprite%3], 0, 240);
      break;
    case DIR_E:
      ctx2.putImageData(boyAnimRight[currentSprite%3], 0, 240);
      break;
    case DIR_W:
      ctx2.putImageData(boyAnimLeft[currentSprite%3], 0, 240);    
  }
  
  requestAnimationFrame(secondLoop);
}

Agora é só pressionar uma das setas e ver o menino se virar para a direção selecionada no link a seguir

https://jsbin.com/yiwepi

Na próxima parte, vamos substituir o retângulo móvel pelos sprites que animamos. Até lá!