prucommercialre.com


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 completamente capaz de desarrollo del juego sofisticado. Para empezar, usted realmente necesita entender 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 unificador que controla el juego.
  • Sprites: Estos objetos son los elementos que se mueven por la pantalla. La mayoría de los elementos del juego son sprites. Cada sprite debe pertenecer a una sola escena, pero usted puede tener tantos sprites como desee. Un sprite se basa en una imagen.

    Cómo construir Animación con simpleGame.js su juego HTML5

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

  • Añade un lienzo a la página. El rectángulo gris es en realidad una etiqueta canvas que se ha añadido automáticamente a la página.
  • Se inicia un bucle del juego. Este programa tiene un bucle del juego ya funcionando a 20 fotogramas por segundo.
  • Contiene un sprite. La imagen de la 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 envuelve automáticamente al otro lado de la pantalla cuando sale de un lado.

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

<! DOCTYPE HTML>
<Html lang = "en-US">
<Head>
<Charset meta = "UTF-8">
<Title> redBall.html </ title>
<Script type = "text / javascript"
src = "simpleGame.js"> </ script>
<Script type = "text / javascript">
// Juego sencillo con una sola pelota en movimiento
escena var;
bola var;
función init () {
escena = new escena ();
bola = new Sprite (escena "redBall.png", 50, 50);
ball.setMoveAngle (180);
ball.setSpeed ​​(3);
scene.start ();
} // Init final
actualización function () {
scene.clear ();
ball.update ();
} // Actualización final
</ Script>
</ Head>
<Body onload = "init ()">
</ Body>
</ Html>

Se empieza con una página básica HTML5 y añadir algunas características para convertirlo en un entorno de juego.

¿Cómo construir tu página de juegos

Comienza la construcción de la página subyacente:

  1. Comience con una página HTML5.

    Puede utilizar las mismas herramientas que ha estado usando para el otro desarrollo web. Construir una plantilla básica HTML5 como lo hace con cualquier otro documento HTML5.
  2. Importar la biblioteca simpleGame.js.

    Esta biblioteca está disponible de forma gratuita desde la página web. Utilice una etiqueta <script> para importar la biblioteca. Establezca la propiedad src para 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. Usted puede poner un título, instrucciones, u otras herramientas como marcadores de la página, pero el motor de juego va a hacer la mayor parte del trabajo.
  4. Llame a init () cuando se carga el cuerpo.

    Es muy común tener una función llamada cuando se carga el cuerpo. Añadir onload = "init ()" para la etiqueta del cuerpo para llamar al método init ().
  5. Cree una segunda etiqueta de script que contiene el código.

    Usted necesita tener una segunda etiqueta de script de código personalizado. Coloque esta después de la etiqueta que importa la biblioteca.
  6. Coloque dos funciones en el script.

    Todos los programas simpleGame tendrán al menos dos funciones: init () que ocurre en el inicio, y update () pasa una vez por cuadro.

Cómo inicializar su juego

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

escena var;
bola var;
función init () {
escena = new escena ();
bola = new Sprite (escena "redBall.png", 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á disponible para todos ellos. Que se va a crear la escena dentro de la función init ().
  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 la función init (), pero hay que hacer que la variable disponible para todas las funciones.
  3. Construir la función init ().

    Esta función es llamada por onload cuerpo. Se ejecutará después de 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 usted está diciendo en realidad es "Hazme un objeto de escena y llamar a este caso particular 'escena'". La escena no requiere ningún parámetro.
  5. Crear el sprite pelota.

    La pelota es una instancia de Sprite. Para hacer un sprite, se necesita un poco más bits de información. Necesita una escena, un nombre de archivo de imagen, la anchura y la altura.
  6. Ajuste el ángulo de movimiento de la pelota.

    Puede cambiar el ángulo de la pelota se mueve. Los ángulos se miden en grados como en un mapa.
  7. Ajuste la velocidad de movimiento de la pelota.

    También puede determinar la velocidad de la pelota.
  8. Iniciar la escena.

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

Actualización de la animación del juego

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

La función de actualización () no es muy difícil tampoco.

actualización function () {
scene.clear ();
ball.update ();
} // Actualización final

La función de actualización () normalmente hace tres cosas:

  • Limpia la pantalla anterior: La primera orden del día es limpiar cualquier desorden causado por la última pantalla. El objeto de escenas tiene una función clear () para este propósito.
  • Comprueba la existencia de eventos: Por lo general, devolver a la salida de los acontecimientos, como la entrada del usuario, sprites chocando entre sí, sprites salir de la pantalla, o lo que sea. Por esta animación simple, el único evento es un sprite 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. Al actualizar un sprite, elaborará en su nueva posición.

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

Cómo construir Animación con simpleGame.js su juego HTML5