¿Cómo construir animación con simplegame.js su juego html5

Es posible construir una biblioteca que simplifica todas las diversas características del motor de juegos HTML5. Considere el uso de la biblioteca: simpleGame.js. Esta biblioteca es fácil de usar y es totalmente capaz de desarrollo de juegos sofisticados. Para empezar, que realmente necesita comprender sólo dos objetos:

• La escena: Este objeto se inicia con un objeto canvas HTML y agrega el bucle principal. La escena es el objeto de la unificación que controla el juego.

• Sprites: Estos objetos son los elementos que se mueven por la pantalla. La mayor parte de los elementos del juego son los sprites. Cada sprite debe pertenecer a una única escena, pero se puede tener tantos como desee sprites. Un sprite se basa en una imagen.

  Video: Como hacer un juego de pong en javascript Html5 y Canvas

  

Este código es en realidad mucho más sofisticada de lo que parece. Esto es lo que hace:

Video: Programar juegos con HTML5 y javascript

• Se añade un lienzo a la página. El rectángulo gris es en realidad una etiqueta de tela que se ha añadido automáticamente a la página.

• Se inicia un bucle de juego. Este programa tiene un bucle de juego ya se está ejecutando en 20 fotogramas por segundo.

• Contiene un sprite. La imagen de bola es un sprite, que tiene la capacidad de moverse a cualquier velocidad en cualquier dirección y otras características interesantes como la detección de colisiones incorporada.

• El balón está en movimiento. Se ajusta automáticamente al otro lado de la pantalla cuando sale de un lado.

Aquí está todo el listado de código:

Se empieza con una página básica HTML5 y agrega algunas características que lo convierten en un entorno de juego.

Cómo construir su página de juegos

Comience por la construcción de la página subyacente:

1. Comience con una página HTML 5.

   Puede utilizar las mismas herramientas que ha estado usando para el otro desarrollo web. Construir una plantilla básica HTML 5 como se hace para cualquier otro documento HTML 5.

2. Importe el simpleGame.js biblioteca.

   Video: 30.- Curso Juego Plataformas en HTML5 - Manipular distintas animaciones

   Esta biblioteca está disponible de forma gratuita desde el sitio web. Utilice una etiqueta para importar la biblioteca. Selecciona el src alojamiento hasta el nombre de la biblioteca (simpleGame.js).

3. Mantenga el HTML simple.

   Usted no necesita mucho. El motor del juego creará un lienzo que contiene la escena. Es posible poner un título, instrucciones, u otras herramientas como marcadores en la página, pero el motor de juego va a hacer la mayoría del trabajo.

4. Llamada en eso() cuando las cargas del cuerpo.

   Es muy común tener una función llamada cuando se carga el cuerpo. Añadir onload = “init ()” a la etiqueta del cuerpo para llamar la en eso() método.

5. Crear una segunda etiqueta script para contener el código.

   Es necesario tener una segunda etiqueta guión de código personalizado. Coloque esto después de la etiqueta que importa la biblioteca.

6. Coloque dos funciones en el script.

   Todas simpleGame programas tendrán por lo menos dos funciones: en eso() que sucede en el arranque, y actualizar() sucede una vez por trama.

Cómo inicializar su juego

La parte de inicialización del juego sucede a medida que se carga la página. Ha tomado sobre todo con la creación de sprites y otros recursos. Aquí está el código:

 var var escena-bola-función init () {= escena nueva escena () - bola = new Sprite (escena, "redBall.jpg", 50, 50) -ball.setMoveAngle (180) -ball.setSpeed ​​(3) -} // init final

La mayoría de los juegos usarán un estilo similar de inicialización. He aquí cómo se configura el juego:

1. Definir una variable para contener la escena.

   Cada simpleGame juego tendrá al menos un objeto de escena. Definir la escena fuera de cualquier función, por lo que está a disposición de todos ellos. Que se va a crear la escena en el interior del en eso() función.

2. Definir una variable para cada sprite.

   Cada elemento sprite en su juego tendrá que pertenecer a una variable global. Vamos a crear los sprites en el en eso() función, pero hay que hacer que la variable disponible para todas las funciones.

3. construir el en eso() función.

   Esta función es llamada por body onload. Se ejecutará después de que la página se ha cargado en la memoria.

4. Crear la escena.

   Para construir el escenario, cree una instancia de la clase escena. Lo que realmente están diciendo es “Hazme un objeto de la escena y llamar a este particular ejemplo‘escena’”. La escena no requiere ningún parámetro.

5. Crear el sprite pelota.

   La pelota es una Duende ejemplo. Para hacer un sprite, se necesita un poco más bits de información. Es necesario una escena, un nombre de archivo de imagen, ancho y alto.

6. Ajustar el ángulo de movimiento de la pelota.

   Se puede cambiar el ángulo de la bola se mueve. Los ángulos se miden en grados como en un mapa.

7. Ajuste la velocidad de movimiento de la pelota.

   También se puede determinar la velocidad de la pelota.

8. Iniciar la escena.

   Cuando haya terminado de configurar todo, decirle a la escena para empezar.

Actualizar la animación del juego

Después de iniciar la escena, un temporizador se iniciará. Veinte veces por segundo, será llamar a una función en la página de llamada actualizar(). Por lo tanto, es necesario tener una función de este tipo, y tiene que tener algo de código para su juego se ejecute.

los actualizar() función no es terriblemente difícil tampoco.

 actualización de la función () {scene.clear () - ball.update () -} // fin de actualización

los actualizar() función normalmente hace tres cosas:

• Borra la pantalla anterior: La primera orden del día es para limpiar cualquier desorden causado por la última pantalla. los Escena objeto tiene una claro() función precisamente para este propósito.

• Los cheques para eventos: Normalmente, se comprueba para eventos, al igual que la entrada del usuario, sprites chocar entre sí, sprites salir de la pantalla, o lo que sea. Por esta animación simple, el único evento es un sprite de salir de la pantalla, y el comportamiento asociado con esta acción se ha automatizado.

• Actualiza cada sprite: La parte final de la actualización de la pantalla es la actualización de los sprites. Cuando se actualiza un sprite, se dibujará en su nueva posición.

Esto es lo que sucede si no se borre la pantalla. Todo el movimiento de sprites se hará efectiva en el lienzo, y se ve como un gran desprestigio en lugar de una bola en movimiento.