Baseball

HTML5/JavaScript para Jogos (Parte 5)

Caso tenha perdido a parte anterior, acesse-a aqui: Parte 4

Vamos, agora, passar para o básico de animações no canvas. Sabendo que uma animação resulta da apresentação rápida de imagens sucessivas, percebe-se que teremos que redesenhar no canvas várias vezes por segundo. Para tal, um método do objeto window, o requestAnimationFrame, pode ser usado, passando, como parâmetro, o método para redesenhar. Então, o requestAnimationFrame cuidará da taxa com que o método será chamado e, ainda, se será chamado, já que pode não ser necessário se a janela não estiver visível, por exemplo. Assim, ao nosso método de inicialização, podemos acrescentar o seguinte:

var x2 = 0;
...
window.onload = function() {	  
    canvas2 = document.getElementById("idCanvas2");
    ctx2 = canvas2.getContext("2d");
    ctx2.strokeRect(x2, 20, 100, 200);
    requestAnimationFrame(secondLoop);
};

Verifique que o parâmetro passado para requestAnimationFrame foi secondLoop, que é o nome da função onde implementaremos a atualização do canvas. Para saber mais a respeito do método chamado, verifique a documentação em

http://www.w3.org/TR/animation-timing/

Perceba, também, que o parâmetro x2 foi declarado antes da função de inicialização e foi usado no desenho inicial do retângulo (linha 6). Isso foi feito para preparar o retângulo para ter sua origem alterada no método de atualização do canvas. Então, implementemos essa função, conforme a seguir:

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

O parâmetro timestamp, recebido na função, indica o tempo entre as chamadas a secondLoop, e pode ser útil para uma animação onde a posição de algum objeto dependa do tempo. Por enquanto, não usaremos esse parâmetro.

A função realiza os seguintes passos:

  1. Apaga todo o canvas
  2. Atualiza a posição x de origem do retângulo
  3. Verifica se a origem do retângulo está fora do canvas e, se estiver, zera a posição x
  4. Redesenha o retângulo com a nova origem
  5. Agenda a próxima chamada da função que redesenha o canvas

O resultado pode ser visto no segundo canvas da página

http://jsbin.com/vivace

Altere o valor com que x2 é atualizado e veja o que acontece. Você consegue deslocar o retângulo para baixo? E na diagonal?

Divirtam-se e até a próxima!

Anúncios

2 comentários sobre “HTML5/JavaScript para Jogos (Parte 5)

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s