Como criar um loop de animação em seu jogo HTML5

Se a tela define o espaço em um jogo HTML5, um loop de animação define o tempo. A maioria dos jogos de javascript usar um mecanismo chamado setInterval () para provocar comportamento repetido. Esta função tem dois parâmetros: um nome de função e um valor de atraso.

Aqui está algum código que simplesmente conta dez vezes por segundo:

counting.html
nada aqui ainda

O processo é simples, e você pode usá-lo a qualquer momento você quer que algo aconteça em intervalos regulares:

  1. Criar uma função que irá ser repetido.

    Neste exemplo simples, a função contagem() será chamado dez vezes por segundo.

  2. No seu código de inicialização, ligue setInterval ().

    Isto irá configurar a chamada repetida para a função.

  3. Indicar a função que irá repetir.

    O primeiro parâmetro é o nome da função que será repetido. Observe que, como você está tratando a função como uma variável, você não incluir parênteses com o nome da função.

  4. Indique o atraso.

    O segundo parâmetro é um valor de atraso em milissegundos (um milissegundo é 1/1000º de um segundo). Este exemplo é executado em um atraso de 100 milissegundos, o que é 10 quadros por segundo. o simpleGame biblioteca é executado em 20 frames por segundo.

Dentro simpleGame, quando você cria um Cena classe, além da criação de uma tela, você é também, através da Cena classe, criando um intervalo que chama repetidamente o atualizar() método de seu jogo. É por isso que você precisa ter um atualizar() método.

menu