HTML5/JavaScript para Jogos (Parte 11)

Caso tenha perdido a última parte, acesse-a aqui: Parte 10

Ou, para ver a série completa, acesse-a no menu Tecnologia no topo da página.

Hoje, vamos fazer a animação se movimentar. Então, primeiro, vamos aproveitar as variáveis usadas no deslocamento do retângulo e declarar mais algumas

var x2 = 0;
var dx2 = 0;
var y2 = 0;
var dy2 = 0;

Perceba que acrescentamos a variável para posição vertical do desenho, y2, e outra para o deslocamento vertical, dy2. Então, na função de redesenho, secondLoop, vamos usar essas variáveis, da seguinte forma

  switch(dir)
  {
    case DIR_N:
      ctx2.putImageData(boyAnimUp[currentSprite%3], x2, y2);
      break;
    case DIR_S:
      ctx2.putImageData(boyAnimDown[currentSprite%3], x2, y2);
      break;
    case DIR_E:
      ctx2.putImageData(boyAnimRight[currentSprite%3], x2, y2);
      break;
    case DIR_W:
      ctx2.putImageData(boyAnimLeft[currentSprite%3], x2, y2);
  }

Na mesma função, retire a chamada a ctx2.strokeRect para que o retângulo não seja mais desenhado. Veja, então, que através de ctx2.putImageData, os sprites serão desenhados com origem em (x2,y2). Entretanto, apenas x2 é atualizada ao usar o teclado. Assim, vamos tratar, também, a atualização da posição vertical, alterando os métodos document.onkeydown e document.onkeyup, conforme a seguir

document.onkeydown = function(e) {
  switch (e.keyCode) {
  case 38:	
    dir = DIR_N;
    moving = true;
    dy2 = -3;
    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;
    dy2 = 3;
    break;
  }
};

document.onkeyup = function(e) {
  moving = false;
  dx2 = 0;
  dy2 = 0;
};

Veja que, em onkeydown, quando a tecla para cima ou para baixo for pressionada (códigos 38 e 40, respectivamente), dy2 recebe um valor diferente de zero e, em onkeyup, dy2 recebe zero. Porém, isso ainda não será refletido na movimentação do personagem, uma vez que a função de redesenho ainda não está usando a variável dy2. Portanto, precisamos acrescentar esse tratamento e podemos fazê-lo da seguinte forma, no início da função secondLoop

function secondLoop(timestamp) {
  ctx2.clearRect(0, 0, canvas.width, canvas.height);
  x2 = x2 + dx2;
  y2 = y2 + dy2;
  ...

Agora, o tratamento da movimentação está completo. Veja o resultado em

https://jsbin.com/hefoje

Na próxima parte, vamos fazer o personagem parar de se mover quando uma das teclas for liberada. Até breve!