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!
2 comentários sobre “HTML5/JavaScript para Jogos (Parte 6)”