Gerenciando mapas de texto em uma matriz 2D para serem pintados na tela HTML5

Então, estou fazendo um RPG em HTML5 apenas por diversão. O mapa é um<canvas> (512px de largura, 352px de altura | 16 telhas, 11 telhas de cima para baixo). Eu quero saber se há uma maneira mais eficiente de pintar<canvas>.

Aqui está como eu tenho agora:

Como os blocos são carregados e pintados no mapa

O mapa está sendo pintado por telhas (32x32) usando oImage() peça. Os arquivos de imagem são carregados através de um simplesfor loop e colocar em uma matriz chamadatiles[] ser PINTADO ao usardrawImage().

Primeiro, nós carregamos as telhas ...

e aqui está como está sendo feito:

// SET UP THE & DRAW THE MAP TILES
tiles = [];
var loadedImagesCount = 0;
for (x = 0; x <= NUM_OF_TILES; x++) {
  var imageObj = new Image(); // new instance for each image
  imageObj.src = "js/tiles/t" + x + ".png";
  imageObj.onload = function () {
    console.log("Added tile ... " + loadedImagesCount);
    loadedImagesCount++;
    if (loadedImagesCount == NUM_OF_TILES) {
      // Onces all tiles are loaded ...
      // We paint the map
      for (y = 0; y <= 15; y++) {
        for (x = 0; x <= 10; x++) {
          theX = x * 32;
          theY = y * 32;
          context.drawImage(tiles[5], theY, theX, 32, 32);
        }
      }
    }
  };
  tiles.push(imageObj);
}

Naturalmente, quando um jogador inicia um jogo, ele carrega o mapa do qual ele parou por último. Mas por aqui, é um mapa de grama.

Neste momento, os mapas usam arrays 2D. Aqui está um mapa de exemplo.

[[4, 1, 4, 1, 4, 1, 4, 1, 4, 1, 4, 1, 1, 1, 1, 1], 
[1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1], 
[13, 13, 13, 13, 1, 1, 1, 1, 13, 13, 13, 13, 13, 13, 13, 1], 
[13, 13, 13, 13, 1, 13, 13, 1, 13, 13, 13, 13, 13, 13, 13, 1], 
[13, 13, 13, 13, 1, 13, 13, 1, 13, 13, 13, 13, 13, 13, 13, 1], 
[13, 13, 13, 13, 1, 13, 13, 1, 13, 13, 13, 13, 13, 13, 13, 1], 
[13, 13, 13, 13, 1, 1, 1, 1, 13, 13, 13, 13, 13, 13, 13, 1], 
[13, 13, 13, 13, 13, 13, 13, 1, 13, 13, 13, 13, 13, 13, 13, 1], 
[13, 13, 13, 13, 13, 11, 11, 11, 13, 13, 13, 13, 13, 13, 13, 1], 
[13, 13, 13, 1, 1, 1, 1, 1, 1, 1, 13, 13, 13, 13, 13, 1], 
[1, 1, 1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1, 1, 1]];

Eu recebo mapas diferentes usando um simplesif estrutura. Uma vez que a matriz 2d acima éreturn, o número correspondente em cada array será pintado de acordo comImage() armazenado dentrotile[]. EntãodrawImage() irá ocorrer e pintar de acordo com ox ey e vezes por32 pintar na corretax-y coordenada.

Como ocorre a comutação múltipla de mapas

Com o meu jogo, os mapas têm cinco coisas para acompanhar:currentID, leftID, rightID, upIDebottomID.

currentID: O ID atual do mapa em que você está.leftID: Qual ID decurrentID para carregar quando você sair à esquerda do mapa atual.rightID: Qual ID decurrentID para carregar quando você sair à direita do mapa atual.downID: Qual ID decurrentID para carregar quando você sair na parte inferior do mapa atual.upID: Qual ID decurrentID para carregar quando você sair no topo do mapa atual.

Algo para observar:leftID, rightID, upIDoubottomID NÃO são específicos, isso significa que eles são0. Isso significa que eles não podem sair desse lado do mapa. É meramente um bloqueio invisível.

Então, uma vez que uma pessoa sai de um lado do mapa, dependendo de onde ela saiu ... por exemplo, se eles saíram na parte inferior,bottomID será o número domap para carregar e, assim, ser pintado no mapa.

Aqui está um .GIF representacional para ajudá-lo a visualizar melhor:

Como você pode ver, mais cedo ou mais tarde, com muitos mapas, eu vou lidar commuitos IDs. E isso pode ficar um pouco confuso e agitado.

O mais óbvio é que ele carrega 176 blocos de uma vez, atualiza uma pequena tela de 512x352 e manipula um mapa no tempo. O con é que os identificadores MAP, ao lidar com muitos mapas, podem ficar confusos às vezes.

Minha perguntaEssa é uma maneira eficiente de armazenar mapas (devido ao uso de blocos) ou há uma maneira melhor de lidar com mapas?

Eu estava pensando nas linhas de um mapa gigante. O tamanho do mapa é grande e é todo um array 2D. A janela de visualização, no entanto, ainda é 512x352 pixels.

Aqui está outro .gif que fiz (para essa pergunta) para ajudar a visualizar:

Desculpe se você não consegue entender meu inglês. Por favor, pergunte a qualquer coisa que você tenha dificuldade em entender. Espero ter deixado claro. Obrigado.