HTML5/JavaScript para Jogos (Parte 12)

Se você perdeu a parte anterior, veja-a aqui: Parte 11

E, para ver a série toda, acesse o menu Tecnologia – HTML5/JavaScript para Jogos, na parte superior da página.

Para fazer os sprites não serem trocados quando liberarmos as teclas, vamos criar uma variável e testá-la na função de redesenho, da seguinte forma

var moving = false;
...
function secondLoop(timestamp) {
  ...
  if(moving)
  {
    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);
    }
  }
  else
  {
    switch(dir)
    {
      case DIR_N:
        ctx2.putImageData(boyAnimUp[0], x2, y2);
        break;
      case DIR_S:
        ctx2.putImageData(boyAnimDown[0], x2, y2);
        break;
      case DIR_E:
        ctx2.putImageData(boyAnimRight[0], x2, y2);
        break;
      case DIR_W:
        ctx2.putImageData(boyAnimLeft[0], x2, y2);      
    }
  }
  ...
}

Verifique que, no código acima, quando a variável moving for false, desenharemos apenas o sprite no índice zero dos vetores de sprites, ao invés de mudar os sprites para fazer a animação. Então, alteramos o valor de moving com o código a seguir (que já reaproveitamos na última parte)

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 o resultado no link a seguir

https://jsbin.com/jusefi

Até a próxima!