Como construir animação com simplegame.js seu jogo html5

É possível construir uma biblioteca que simplifica todos os vários recursos motor de jogo HTML5. Considere o uso da biblioteca: simpleGame.js

. Esta biblioteca é fácil de usar e é totalmente capaz de desenvolvimento de jogos sofisticados. Para começar, você realmente precisa entender apenas dois objetos:

• A cena: Este objeto começa com um objeto tela HTML e adiciona o loop principal. A cena é o objeto unificador que controla o jogo.

• Sprites: Esses objetos são os elementos que se movem na tela. A maioria dos elementos do jogo são sprites. Cada Sprite deve pertencer a uma única cena, mas você pode ter como muitos sprites como você quer. Um sprite é baseado em uma imagem.

  Video: Pong HTML5 Game Programming Tutorial javascript

  

Este código é realmente muito mais sofisticado do que parece. Aqui está o que ele faz:

• Ele adiciona uma tela para a página. O retângulo cinza é realmente uma tag canvas que foi adicionada automaticamente à página.

• Ela começa um loop de jogo. Este programa tem um loop do jogo já rodando a 20 quadros por segundo.

• Ele contém um sprite. A esfera é um sprite, que tem a capacidade de mover qualquer velocidade em qualquer direção e outras características interessantes, como detecção de colisão construído em.

• A bola está em movimento. Ela envolve automaticamente para o outro lado da tela quando ele deixa de lado.

Aqui está toda a listagem de código:

Você começa com uma página básica HTML5 e adicionar alguns recursos para transformá-lo em um ambiente de jogo.

Como construir sua página do jogo

Comece por construir a página subjacente:

1. Comece com uma página HTML5.

   Você pode usar as mesmas ferramentas que você está usando para seu outro desenvolvimento web. Construir um modelo básico HTML5 como você faz para qualquer outro documento HTML5.

2. importar o simpleGame.js biblioteca.

   este biblioteca está disponível gratuitamente a partir do site. Use uma tag para importar a biblioteca. Colocou o src propriedade para o nome da biblioteca (simpleGame.js).

3. Mantenha o simples HTML.

   Você não precisa de muito. O motor de jogo vai criar uma tela que contém a cena. Você pode colocar um título, instruções ou outras ferramentas como painéis de avaliação sobre a página, mas o motor de jogo vai fazer a maior parte do trabalho.

4. Ligar nisso() quando as cargas do corpo.

   É muito comum ter uma função chamada quando as cargas do corpo. Adicionar onload = “init ()” à tag body para chamar a nisso() método.

5. Criar uma segunda marca de script para conter seu código.

   Você precisa ter uma segunda marca de script para o código personalizado. Coloque este após a tag que importa a biblioteca.

6. Coloque duas funções em seu script.

   Todos simpleGame programas terão pelo menos duas funções: nisso() acontece no arranque, e atualizar() acontece uma vez por quadro.

Como inicializar o seu jogo

A parte de inicialização do jogo acontece como a página é carregada. Levou principalmente com a criação de sprites e outros recursos. Aqui está o código:

 var cena-var-função bola init () {cena = new Scene () - ball = new Sprite (cena, "redBall.jpg", 50, 50) -ball.setMoveAngle (180) -ball.setSpeed ​​(3) -} // Init extremidade

A maioria dos jogos vai usar um estilo semelhante de inicialização. Veja como você configurar o jogo:

1. Definir uma variável para conter a cena.

   Cada simpleGame jogo terá pelo menos um objeto de cena. Defina o local fora quaisquer funções, para que esteja disponível para todos eles. Você vai realmente criar a cena dentro da nisso() função.

2. Definir uma variável para cada do sprite.

   Cada sprite no seu jogo terá de pertencer a uma variável global. Você vai criar os sprites na nisso() função, mas você precisa fazer a variável disponível para todas as funções.

3. construir o nisso() função.

   Esta função é chamada por onload corpo. Ele será executado após a página foi carregada na memória.

4. Criar a cena.

   Para construir a cena, crie uma instância da classe cena. O que você está realmente dizendo é “Faça-me um objeto de cena e chamar este particular instância‘cena’.” A cena não requer quaisquer parâmetros.

5. Criar a bola Sprite.

   A bola é um duende instância. Para fazer um sprite, você precisa de mais alguns bits de informação. Você precisa de uma cena, um nome de arquivo de imagem, largura e altura.

6. Definir o ângulo de movimento da bola.

   Você pode mudar o ângulo a bola se move. Os ângulos são medidos em graus como em um mapa.

7. Definir a velocidade de movimento da bola.

   Você também pode determinar a velocidade da bola.

8. Comece a cena.

   Quando você terminar de configurar tudo, dizer a cena para começar.

Atualizar a animação do jogo

Depois de iniciar a cena, um temporizador começará. Vinte vezes por segundo, ele vai chamar uma função em sua página chamada atualizar(). Então, você precisa ter uma função tal, e ele precisa ter algum código para o seu jogo para ser executado.

o atualizar() função não é terrivelmente difícil.

 update function () {scene.clear () - ball.update () -} // update final

o atualizar() função normalmente faz três coisas:

• Limpa a tela anterior: A primeira ordem de negócio é para limpar qualquer confusão causada pela última tela. o Cena objecto tem um Claro() função exatamente para este fim.

• Verifica a existência de eventos: Normalmente, você buscar por eventos, como a entrada do usuário, sprites colidir com o outro, sprites sair da tela, ou o que quer. Por esta animação simples, o único evento é um sprite sair da tela, e o comportamento associado com esta ação foi automatizado.

• Atualiza cada Sprite: A parte final da atualização de tela está atualizando os sprites. Quando você atualizar um sprite, ele vai chamar em sua nova posição.

Eis o que acontece se você não limpar a tela. Todo o movimento do sprite será desenhada na tela, e parece que uma grande mancha em vez de uma bola em movimento.