Como usar matrizes para simplificar os dados em seu jogo HTML5

jogos HTML5 está prestes de dados, muitas vezes isso significa um muito

de dados. Uma matriz é a maioria dos programadores básicas ferramenta tem para gerenciar grandes quantidades de dados. javascript suporta um mecanismo de matriz simples, mas muito poderosa e flexível que permite que você faça muito com matrizes.

Uma matriz é na verdade uma idéia-muito simples é simplesmente uma lista. Você já usou listas muitas vezes no código HTML, mas na programação, listas são chamados de matrizes, e têm características especiais. Este exemplo apresenta duas matrizes - uma lista de livros escritos por um determinado autor charmoso e diabolicamente bonito, e alguns dos tópicos disse o autor escreve sobre.

Esta página tem quatro componentes principais:

• estrutura HTML: Tem um formulário com dois botões. o corpo chama uma função de inicialização quando ele carrega, e cada botão chama a sua própria função. O principal também tem um div nomeado saída.

• A nisso() função: Esta função permite o acesso ao div de saída, e também carrega-se as duas matrizes descritas neste exemplo. Arrays geralmente requerem algum tipo de inicialização.

• o showBooks () função: Você vai se surpreender e surpreender que esta função exibe uma série de títulos de livros.

• o showTitles () função: Esta função demonstra outra forma para percorrer os elementos de um array.

Como construir matrizes do jogo

Arrays são frequentemente criadas como variáveis ​​globais porque eles são usados ​​muitas vezes ao longo do programa (e, em alguns idiomas, passando uma matriz como um parâmetro pode ser meio complicado).

Neste programa, você pode criar uma série de variáveis ​​no espaço global e inicializar-los todos no nisso() função chamada com body.onload.

 -Função tópicos var saída de var livros-var init () {// inicializa de saída e matrizes // partir basicArrays.htmloutput = document.getElementById ( "output") - livros = Array ( "Jogo de programação Flash para Dummies", "Game programação, o L Line "," HTML / XHTML / CSS All in One "," javascript e AJAX for Dummies "," HTML5 Quick Reference ") - tópicos = array (5) -topics [0] =" HTML5 "-topics [1] = "CSS3" -topics [2] = "javascript" -topics [4] = "AJAX" -} // inicialização final

Configurando as matrizes é a parte mais importante do processo:

1. Criar variáveis ​​para as matrizes.

   Existem duas matrizes no presente exemplo, livros e tópicos. Cada um é criado apenas como qualquer outra variável, com o var declaração. Você também criar uma saída variável para manter uma referência para o saída div.

2. construir uma nisso() função para inicializar variáveis.

   Como os programas se tornam mais complexas, é comum ter uma função de inicialização para configurar tudo. Esta função é chamada com body.onload.

3. construir o saída variável.

   Porque todas as outras funções usará saída, criá-la em nisso().

4. Use o Array () função para criar a matriz de livros.

   Esta função especial é usada para criar uma matriz de elementos. Note que ele usa um maiúsculas UMA. (Se você tem de ser técnico, este é um construtor para uma ordem objeto, mas em javascript, que é uma função, também.)

5. Basta listar cada livro como um parâmetro na Array () função.

   Se você alimentar o ordem funcionar uma série de valores, tornam-se os valores da matriz. Esta técnica é ótimo se você já sabe o que vai entrar em cada elemento quando você constrói a matriz.

6. Construir a matriz de temas de forma diferente.

   o tópicos matriz é construir com uma técnica diferente. Nesta matriz, você pode especificar um único inteiro, que é o número de elementos do array conterá.

7. Use o operador de índice para adicionar elementos à matriz.

   Todos os elementos do array têm o mesmo nome, mas eles têm um número diferente. Use colchetes com um número inteiro para se referir a um elemento específico no arranjo. Note-se que os elementos de matriz sempre começam com o elemento zero.

Se você já usou matrizes em outras linguagens de programação, você vai encontrar matrizes de javascript para ser muito indulgente. Tenha cuidado, porém, porque as matrizes são uma das características que toda linguagem suporta, mas todos eles funcionam um pouco diferente. Você vai realmente encontrar as matrizes de javascript são mais como o ArrayList em Java ou o Vetor classe em C ++ do que a matriz tradicional em qualquer uma destas línguas.

A matriz de livros para preparar seus jogos

Arrays são maravilhosos porque permitem que você para embalar um monte de dados em uma única variável. Muitas vezes, quando você tem uma matriz, você vai querer fazer alguma coisa com cada elemento na matriz. A estrutura mais comum de fazer isto é um para loop. Olhe para showBooks () por exemplo:

 showBooks function () {// a partir basicArrays.htmloutput.innerHTML = "" -para (i = 0- i lt; books.length- i ++) {output.innerHTML + = livros [i] + "
"-} // Fim do loop} // showBooks finais

Esta função percorre a lista de livros e imprime o nome de cada um na área de saída:

1. Desmarque a saída div.

   Saída já foi definido na nisso() função, por isso é muito fácil de limpar o seu valor na função.

2. Construir um circuito para o comprimento da matriz.

   Arrays e para loops são parceiros naturais. Neste ciclo, você tem Eu contar do zero para o número de elementos na matriz.

3. Comece com zero.

   índices de matriz sempre começam com zero, para que o seu variável de contagem também deve começar em zero (na maioria dos casos).

4. Use a propriedade length para determinar quanto tempo a matriz é.

   Quando você construir um para loop para percorrer um array, o que você realmente quer saber é quantos elementos estão na matriz. Usar arrayName.length para determinar o número de elementos na matriz atual, onde arrayName é o nome da matriz corrente. Desta forma, mesmo que o número de elementos em que as alterações da matriz, o circuito continuará a funcionar correctamente.

5. dados do processo dentro do ciclo.

   Se a variável de contagem é Eu, cada elemento da matriz é arrayName [i] dentro do loop. Você pode fazer o que quiser com os dados.