Cómo utilizar matrices para simplificar los datos en su juego html5

juegos HTML5 están a punto Data- menudo eso significa una mucho de datos. Una matriz es la mayoría de los programadores de herramientas básicas tienen para gestionar grandes cantidades de datos. javascript soporta un mecanismo de matriz simple pero muy potente y flexible que le permite hacer un montón con matrices.

Una matriz es en realidad una idea-muy simple que es simplemente una lista. Ya ha utilizado muchas veces en las listas de codificación HTML, pero en la programación, listas se llaman matrices, y tienen características especiales. En este ejemplo se cuenta con dos matrices - una lista de libros escritos por un autor encantador y bello como el diablo, y algunos de los temas, dijo el autor escribe sobre.

Esta página tiene cuatro componentes principales:

• estructura HTML: Tiene un formulario con dos botones. los cuerpo llama a una función de inicialización cuando se carga, y cada botón se llama a su propia función. La página también tiene una div llamado salida.

• Un en eso() función: Esta función proporciona acceso a la div salida, y también cargas de hasta las dos matrices descritas en este ejemplo. Las matrices por lo general requieren algún tipo de inicialización.

• los showBooks () función: Usted se sorprenderá y sorprenderá que esta función muestra una serie de títulos de libros.

• los showTitles () función: Esta función muestra otra manera de caminar a través de los elementos de una matriz.

Video: Pseint Vol2 - Tablero de ajedrez

¿Cómo construir matrices del juego

Las matrices se crean con frecuencia como variables globales, ya que a menudo se utilizan en todo el programa (y en algunos idiomas, pasando un array como parámetro puede ser un poco complicado).

En este programa, se puede crear una serie de variables en el espacio global e inicializar todos ellos en el en eso() con la función llamada body.onload.

 var salida-var var libros-temas-función init () {// inicializar la producción y arreglos de basicArrays.htmloutput // = document.getElementById ("salida") -books = Array ("Programación Flash juego para los maniquíes","Programación juego, la línea L","HTML / XHTML / CSS todo en uno","javascript y AJAX para los maniquíes","HTML5 de referencia rápida") -Temas = Array (5) -Temas [0] = "HTML5"-Temas [1] = "CSS3"-Temas [2] = "javascript"-Temas [4] = "AJAX"- init} // fin

La creación de las matrices es la parte más importante del proceso:

1. Creación de variables para las matrices.

   Video: Uso de matrices en la programación de un videojuego

   Hay dos matrices en este ejemplo, libros y temas. Cada uno se crea al igual que cualquier otra variable, con el var declaración. También se crea una salida variable para contener una referencia a la salida div.

2. construir una en eso() funcionar para inicializar variables.

   A medida que los programas se hacen más complejos, es común tener una función de inicialización para configurar todo. Esta función se llama con body.onload.

3. construir el salida variable.

   Debido a que todas las otras funciones usarán salida, se crea en en eso().

4. Utilizar el Formación() función para crear la matriz de libros.

   Esta función especial se utiliza para crear una matriz de elementos. Note que usa una mayúscula UN. (Si tiene que ser técnicas, esto es un constructor para una Formación objeto, pero en javascript, que es una función, también.)

5. Basta con enumerar cada libro como un parámetro en el Formación() función.

   Si usted alimenta a la Formación funcionar una serie de valores, se convierten en los valores de la matriz. Esta técnica es ideal si ya sabe lo que va a entrar en cada elemento cuando se construye la matriz.

6. Construir la matriz temas de manera diferente.

   los temas matriz es construir con una técnica diferente. En esta matriz, se puede especificar un solo número entero, que es el número de elementos de la matriz contendrá.

7. Utilice el operador de índice para añadir elementos a la matriz.

   Todos los elementos de la matriz tienen el mismo nombre, pero tienen un número diferente. Utilice corchetes con un número entero para referirse a un elemento específico de la matriz. Observe que los elementos de la matriz siempre comienzan con el elemento cero.

Si ha utilizado matrices en otros lenguajes de programación, encontrará las matrices de javascript que ser muy indulgente. Tenga cuidado, sin embargo, porque las matrices son una de las características que soporta todos los idiomas, pero todos ellos trabajan un poco diferente. En realidad se va a encontrar las matrices de javascript son más como el Lista de arreglo en Java o el Vector clase en C ++ que el régimen tradicional en cualquiera de estos idiomas.

La matriz de libros para preparar sus juegos

Las matrices son maravillosos porque permiten a empacar una gran cantidad de datos en una sola variable. Muy a menudo, cuando se tiene una matriz, usted querrá hacer algo con cada elemento de la matriz. La estructura más común de hacer esto es una para lazo. Mirar showBooks () para un ejemplo:

 showBooks function () {// desde basicArrays.htmloutput.innerHTML = "-para (i = 0- i lt; books.length- i ++) {output.innerHTML + = libros [i] + "
"-} // fin de bucle} // showBooks finales

Esta función pasos a través de la lista de libros e imprime el nombre de cada uno en la zona de salida:

1. Limpiar el salida div.

   Salida ya se ha definido en el en eso() función, por lo que es bastante fácil de limpiar su valor en la función.

2. Construir un bucle para la longitud de la matriz.

   y matrices para bucles son socios naturales. En este bucle, que tiene yo contar desde cero hasta el número de elementos en la matriz.

3. Comience con cero.

   índices de matriz siempre comienzan con cero, por lo que la variable de conteo también debe empezar en cero (en la mayoría de los casos).

4. Utilizar la propiedad length para determinar el tiempo que la matriz es.

   Cuando se construye una para bucle al paso a través de una matriz, lo que realmente quiere saber es cuántos elementos hay en la matriz. Utilizar arrayName.length para determinar el número de elementos en la matriz actual, donde nombreArray es el nombre de la matriz actual. De esta manera, incluso si el número de elementos en los cambios de la matriz, el bucle todavía funciona correctamente.

5. Los datos de proceso en el interior del bucle.

   Si la variable de conteo es yo, cada elemento de la matriz es nombreArray [i] dentro del bucle. Puede hacer lo que quiera con los datos.