Cómo construir una biblioteca de objetos reutilizables para su juego HTML5

March 10

Habrá ocasiones en las que la reutilización de objetos varias veces en sus juegos HTML5 y que van a permanecer sobre la misma. Así, tiene sentido ponerlos en una biblioteca para una fácil reutilización. Eso es exactamente lo que vas a hacer. Echa un vistazo a frogLib.js:

//frogLib.js
// Objetos para juego de la rana
función Fly () {
tFly = new Sprite (escena "fly.png", 20, 20);
tFly.setSpeed ​​(10);
tFly.wriggle = function () {
// Cambiar de dirección por una cierta cantidad al azar
newdir = (Math.random () * 90) - 45;
this.changeAngleBy (newdir);
} // Culebree final
volver tFly;
} // Fin de la mosca
funcionar Frog () {
tFrog = new Sprite (escena "frog.png", 50, 50);
tFrog.maxSpeed ​​= 10;
tFrog.minSpeed ​​= -3;
tFrog.setSpeed ​​(0);
tFrog.setAngle (0);
tFrog.checkKeys = function () {
si (keysDown [K_LEFT]) {
this.changeAngleBy (-5);
} // End if
si (keysDown [K_RIGHT]) {
this.changeAngleBy (5);
} // End if
si (keysDown [K_UP]) {
this.changeSpeedBy (1);
si (this.speed> this.maxSpeed) {
this.setSpeed ​​(this.maxSpeed);
} // End if
} // End if
si (keysDown [K_DOWN]) {
this.changeSpeedBy (-1);
si (this.speed <this.minSpeed) {
this.setSpeed ​​(this.minSpeed);
} // End if
} // End if
} // end checkKeys
volver tFrog;
} // SetupFrog final

Este es un documento interesante. No contiene nada pero las dos definiciones de clases. Se utiliza debido a que varios otros programas utilizarán estas dos clases.

El uso de una biblioteca es la simplicidad misma. Aquí está el archivo frogFly.html que pone a estos dos elementos en un solo juego:

<! DOCTYPE HTML>
<Html lang = "en-US">
<Head>
<Charset meta = "UTF-8">
<Title> frogFly.html </ title>
<Script type = "text / javascript"
src = ""> simpleGame.js
</ Script>
<Script type = "text / javascript"
src = "frogLib.js"> </ script>
<Script type = "text / javascript">
escena var;
rana var;
mosca var;
hojas var;
función init () {
escena = new escena ();
scene.setBG ("verde");
rana rana = new ();
volar = new Fly ();
deja = new Sprite (escena "leaves.png", 640, 480);
leaves.setSpeed ​​(0);
scene.start ();
} // Init final
actualización function () {
scene.clear ();
frog.checkKeys ();
fly.wriggle ();
leaves.update ();
frog.update ();
fly.update ();
} // Actualización end ();

</ Script>
</ Head>
<Body onload = "init ()">
</ Body>
</ Html>

Este programa no introduce mucho de nuevo. Simplemente implementa los elementos definidos en la biblioteca, de acuerdo con los siguientes pasos:

  1. Importar la biblioteca froglib.js.

    El archivo frogLib es simplemente un archivo JavaScript. Importe de la misma manera de importar el archivo simpleGame.js, con una separada etiqueta <script>.

  2. Crear los sprites.

    El sprite de hojas es sólo un sprite de ordinario. Construir la rana y volar como lo hacía antes, a pesar de que están definidos en otro archivo. (Si la rana o mosca no se crea, asegúrese de que ha importado correctamente la biblioteca.)

  3. Gestionar el cambio.

    La función de actualización () asume la responsabilidad por el control del juego. Aquí es donde puede administrar todos los diversos comportamientos de sprites: Informe a la rana a buscar las pulsaciones de teclado (con los frog.checkKeys () método), y decirle a la marcha para escabullirse (con el método fly.wriggle ()).

  4. Dibuja los sprites.

    Una vez que usted ha manejado todo lo que hizo que los sprites para cambiar, dibujan los sprites en pantalla. Dibuja cada sprite invocando su método update (). Sprites se dibujan en orden, así que cualquier cosa que usted desea tener en el fondo debe obtenerse antes de elementos que se mostrarán en la parte delantera. (La rana aparecerá en la parte superior del fondo, por lo que la rana debe elaborarse después de que el fondo de cada actualización de la pantalla.)

    Cómo construir una biblioteca de objetos reutilizables para su juego HTML5