Como usar matrizes para simplificar os dados em seu jogo html5

jogos HTML5 está prestes data- 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 belo, 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. A página 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 uma outra maneira para percorrer os elementos de um array.

Como construir matrizes do jogo

Arrays são frequentemente criados como variáveis ​​globais, porque eles são usados ​​com freqüência 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 saída e matrizes // da basicArrays.htmloutput = document.getElementById ("saída") -books = Array ("Programação Flash Game for Dummies","Programação jogo, o L Linha","HTML / XHTML / CSS All in One","javascript e AJAX for Dummies","HTML5 Referência Rápida") -topics = 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 conter uma referência para o saída div.

  2. construir um 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 uma letra maiúscula 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 no 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ê construir 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.

    Video: Programação de Jogos em C++ Modulo 1 / Aula 7 - Matrizes

    Todos os elementos do array tem 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 cada 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 das línguas.

A matriz 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 um array, você vai querer fazer alguma coisa com cada elemento na matriz. A estrutura mais comum de fazer isso é uma para ciclo. Olhe para showBooks () por exemplo:

 showBooks function () {// de 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 no 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 array 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 comprimento 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 de corrente, onde arrayName é o nome da matriz corrente. Desta forma, mesmo que o número de elementos nas mudanças de matriz, o loop ainda funciona corretamente.

  5. Os dados de processo dentro do ciclo.

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


Publicações relacionadas