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
Até a próxima!
2 comentários sobre “HTML5/JavaScript para Jogos (Parte 12)”