HTML5/JavaScript para Jogos (Parte 6)

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

Agora que já temos uma maneira de atualizar a posição do nosso retângulo no segundo canvas, vamos acrescentar o tratamento do teclado para alterar sua posição. Para isso, vamos usar os eventos onkeydown e onkeyup do objeto document. Como os próprios nomes sugerem, o evento onkeydown acontece quando uma tecla é pressionada e, onkeyup, quando é liberada. Então, vamos acrescentar funções que serão chamadas quando esses eventos ocorrerem, da seguinte forma:

var dx2 = 0;

document.onkeydown = function(e) {
    switch (e.keyCode) {
    case 37:
        dx2 = -3;
        break;	
    case 39:	
        dx2 = 3;
        break;
    }
};

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

Para mais informações sobre os eventos onkeydown e onkeyup, veja os links a seguir:

http://www.w3schools.com/jsref/event_onkeydown.asp

http://www.w3schools.com/jsref/event_onkeyup.asp

 

Analisemos, então, o código anterior. Primeiro, uma nova variável, dx2, é declarada para ser utilizada como a diferença entre a posição x atual e a próxima posição da origem do retângulo. No código mostrado, ela ainda não é utilizada, mas veremos isso em seguida. Depois, é declarada a função que será chamada quando qualquer tecla for pressionada. Assim, o switch é necessário para testar qual tecla foi pressionada, usando o parâmetro keycode do evento e recebido. Além disso, os valores 37 e 39 representam as teclas seta para a esquerda e seta para a direita, respectivamente. Então, na sequência, o método chamado na liberação de uma tecla zera a diferença entre as posições inicial e final do retângulo, mantendo-o parado. Caso queira ver uma forma de descobrir os keycodes de cada tecla, veja essa resposta no StackOverflow:

http://stackoverflow.com/questions/1444477/keycode-and-charcode

 

Agora só falta atualizar a posição do retângulo. Veja como no código em seguida:

function secondLoop(timestamp) {
    ctx2.clearRect(0, 0, canvas.width, canvas.height);
    x2 = x2 + dx2;
  
    if (x2 > canvas.width) {
        x2 = 0;
    }
  
    ctx2.strokeRect(x2, 20, 100, 200);
    requestAnimationFrame(secondLoop);
}

Lembre-se de que programamos, na parte 5, o método secondLoop para ser chamado para redesenhar o canvas. Com a modificação da linha 3, a posição do retângulo passa a depender também de dx2, que muda de valor de acordo com a tecla pressionada.

Veja o código completo em http://jsbin.com/zijaqi

Se tiver um tempinho, tente fazer o retângulo se mover para cima e para baixo também.

Até a próxima!