Como construir uma biblioteca de objetos reutilizáveis ​​para o seu jogo html5

Haverá momentos em que você vai reutilizar objetos várias vezes em seus jogos em HTML5 e eles estão indo para ficar sobre o mesmo. Então, faz sentido para colocá-los em uma biblioteca para facilitar a reutilização. Isso é exatamente o que você vai fazer. Dê uma olhada frogLib.js

//frogLib.js//Objects para sapo gamefunction Fly () {tFly = new Sprite (cena, "fly.jpg", 20, 20) -tFly.setSpeed ​​(10) -tFly.wriggle = função () {// mudar de direcção por alguns amountnewDir aleatório = (Math.random () * 90) - 45-this.changeAngleBy (Newdir) -} // fim wrigglereturn tFly-} // fim Flyfunction Frog () {tFrog = new Sprite (cena, "frog.jpg", 50, 50) -tFrog.maxSpeed ​​= 10 = tFrog.minSpeed ​​-3-tFrog.setSpeed ​​(0) -tFrog.setAngle (0) -tFrog.checkKeys = função () {if (keysDown [K_LEFT]) {este .changeAngleBy (-5) -} // final IFIF (keysDown [K_RIGHT]) {this.changeAngleBy (5) -} // final IFIF (keysDown [K_UP]) {this.changeSpeedBy (1) -se (this.speed gt; this.maxSpeed) {this.setSpeed ​​(this.maxSpeed) -} // final se} // final IFIF (keysDown [K_DOWN]) {this.changeSpeedBy (-1) -se (this.speed lt; this.minSpeed) {this.setSpeed ​​(this.minSpeed) -} // fim do if} // fim do if} // fim checkKeysreturn tFrog-} // setupFrog final

Este é um documento interessante. Ele contém nada, mas as duas definições de classe. Ele é usado porque vários outros programas irá usar estas duas classes.

Usando uma biblioteca é a própria simplicidade. Aqui está o frogFly.html arquivo que coloca esses dois elementos juntos em um único jogo:

Este programa não introduzir muito do que há de novo. Ele simplesmente implementa os elementos definidos na biblioteca, de acordo com estes passos:

1. importar o froglib.js biblioteca.

   
   
   
   

   o frogLib arquivo é simplesmente um arquivo javascript. Importá-lo da mesma forma que você importar o simpleGame.js arquivo, com uma etiqueta separada.

2. Criar os sprites.

   Video: Estrutura básica de um jogo com javascript e HTML - Pt.1 de 3

   o sai Sprite é apenas um duende comum. Construir o sapo e voar apenas como você fez antes, mesmo que estejam definidos em outro arquivo. (Se o sapo ou mosca não se criado, certifique-se que você importou a biblioteca corretamente.)

3. Gerir a mudança.

   o atualizar() função assume a responsabilidade pelo controle do jogo. Isto é onde você gerenciar todos os vários comportamentos Sprite: Diga o sapo de olhar para as teclas digitadas (com a frog.checkKeys () método), e dizer a mosca a contorcer-se (com o fly.wriggle () método).

4. Desenhar os sprites.

   Uma vez que você lidou com tudo o que fez com que os sprites de mudar, desenhar os sprites na tela. Desenhar cada Sprite invocando a sua atualizar() método. Sprites são desenhados em ordem, então qualquer coisa que você quer ter em segundo plano deve ser elaborado antes de itens que serão exibidos na frente. (O sapo vai aparecer no topo do fundo, de modo que o sapo deve ser elaborado após a fundo em cada atualização de tela.)

   

   Video: Tutorial - Criar jogo em javascript e html 5 - Parte 6