¿Cómo trabajar con varios objetos en su juego html5

Sería bueno tener más de un objeto en su juego HTML5. Varios objetos que el juego sea un poco más emocionante y añade un poco de profundidad. Un objeto chocando alrededor de por sí no es muy divertido. ¿De qué sirven los errores si no puede ser infestado con ellos?

Video: 2 - Juegos Multimedia HTML5 - Crear espacio de trabajo y profundizar en el canvas

Debido a que el juego fue creado con los principios orientados a objetos, es bastante fácil de añadir múltiples moscas. Aquí está el código.

 
Hits: 0

En esencia, se activa una sola mosca en una matriz de moscas. Cada vez que usted habría hecho algo con una sola mosca, iterar a través de la matriz de moscas. Éstos son los aspectos más destacados:

1. Cambiar el mosca variable, de forma que ahora se denomina moscas.

   En lugar de un único mosca variable, se va a trabajar con una gran variedad de moscas.

2. Crear un NUMFLIES constante.

   Video: Juego en HTML5 - Parte 12: Objetos JSON

   Almacenar el número de moscas en una variable especial llamada NUMFLIES. Este seguimiento del número de moscas en el juego. Usted puede cambiar fácilmente este valor para hacer el juego más difícil o más fácil. Tenga en cuenta que el valor de NUMFLIES no se espera que cambie durante una única carrera del juego, por lo que se pone todo en mayúsculas para indicar que es una constante.

3. Agrega un golpes variable y una marcador div.

   Esta variable se mantendrá un registro del número de colisiones con mosca de rana. Hay una correspondiente div, que muestra la puntuación.

4. Configurar las moscas.

   los setupFlies () la función se ejecuta a través de un bucle NUMFLIES veces. Cada vez que a través del bucle, se crea una mosca y lo anexa a la numFlies formación:

    setupFlies de función () {vuela = new Array (NUMFLIES): para (i = 0- i lt; NUMFLIES- i ++) {moscas [i] = new Fly () -} end // for} // setupFlies finales

5. Modificar el actualizar() función.

   Ahora que tiene múltiples moscas, es necesario asegurarse de actualizar cada elemento de la moscas formación. Una vez más, utilizar una para bucle para ir a través de la matriz. Para cada vuelan en la matriz, llame a su meneo() método, comprobar las colisiones con la rana y actualización:

    actualización de la función () {scene.clear (frog.checkKeys) - () - (leaves.update) - for (i = 0- i lt; NUMFLIES- i ++) {moscas [i] .wriggle () -checkCollisions (i) -moscas [i] .Update () - } // fin de buclefrog.update () -} // actualizar final () -

6. Modificar el checkCollisions () función.

   Es necesario hacer algunos cambios menores checkCollisions por lo que puede comprobar si hay una colisión entre la rana y la marcha actual. Basta con pasar un número elevado de la función y el uso de ese índice para hacer la prueba de colisión:

    checkCollisions de función (flyNum) {if (frog.collidesWith (moscas [flyNum])) {moscas [flyNum] .reset () - ribbit.play () - updateScore () -} // fin if} // checkCollisions finales

7. Actualizar el marcador.

   El último paso es actualizar el marcador. Todo esto requiere es para incrementar el número de visitas y luego cambiar el marcador div para reflejar el nuevo número de visitas:

 función updateScore () {// actualizar los scoreboardhits + = 1-scoreBoard.innerHTML = "Golpes: " + Golpea} // fin updateScore