Tiled Map

HTML

<div id="screen" style="position:relative;font-size:9px"></div>

JavaScript

/*
   Primero, las constantes: TILE_WIDTH y TILE_HEIGHT definen el numero de caracteres
   de ancho y alto dentro de cada tile.
   
   El mapa de juego es de MAPTILE_WIDTH*MAPTILE_HEIGHT tiles.
   
   La pantalla es de VISIBLEMAP_ROWS*VISIBLEMAP_COLS caracteres.
  
*/

var TILE_WIDTH=5;
var TILE_HEIGHT=5;
var MAPTILE_WIDTH=128;
var MAPTILE_HEIGHT=128;
var VISIBLEMAP_COLS=40;
var VISIBLEMAP_ROWS=25;

/*
    Lo anterior define varios "espacios" donde es necesario construir coordenadas:
	- El espacio de mapa, donde x e y definen un tile.
	- El espacio de tile, donde x e y definen un caracter dentro del tile
	- El espacio de pantalla, donde x e y definen un caracter.
	- El espacio de pantalla/tile, donde cada posicion de la pantalla se define como
	  un tile en coordenadas de mapa, mas un offset X/Y dentro del tile.
	  
	  Para eso se usa SCREENMAP(X/Y), que indica que tile esta en la esquina superior izquierda,
	  y SCREENTILEOFF(X/Y) indican las coordenadas de ese tile que llevan al caracter. 

*/
var SCREENMAPX=0; 
var SCREENMAPY=0; 
var SCREENTILEOFFX=0;
var SCREENTILEOFFY=0;
var SCREENMAPX_COUNTER;
var SCREENTILEOFFX_COUNTER;
var SCREENMAPY_COUNTER;
var SCREENTILEOFFY_COUNTER;

var CHARX=0;
var CHARY=0;

var globalMap=[];
for(var k=0;k<MAPTILE_WIDTH*MAPTILE_HEIGHT;k++)
{
   globalMap.push(k%256);
}
var tileMap=[];
// Se inicializan los tiles.Van a ser memoria continua
var counter=0;
for(var j=0;j<256;j++)
{
	// Los vamos a inicializar a un numero aleatorio de hasta 8 digitos.   
   for(var i=0;i<TILE_HEIGHT;i++)
   {	  
	  for(var k=0;k<TILE_WIDTH;k++)
	  {
		tileMap.push(counter%10);		
	  }   
   }
   counter++;
}



var screenMemory=[];
function repaintScreen()
{
	// Se inicializan los contadores al top de la pantalla.
	SCREENMAPX_COUNTER=SCREENMAPX;
	SCREENTILEOFFX_COUNTER=SCREENTILEOFFX;
	SCREENMAPY_COUNTER=SCREENMAPY;
	SCREENTILEOFFY_COUNTER=SCREENTILEOFFY;
	
	// screenCounter lleva el contador de la posicion de memoria donde tenemos
	// que almacenar el...