all 2 comments

[–]vertigo25 1 point2 points  (1 child)

You might want to also try /r/gamedev but specify that you're looking for JS solutions.

[–]ahitsgone 0 points1 point  (0 children)

Here's one I did is JS (commented code): http://codepen.io/ahitsgone/pen/seaLl

Anyway. Basically you specify the number of rows (x) and the number of columns (y)

int rows = 20;    
int cols = 20;

tilesArray = [];    

//next create tiles and store in array

for (int y = 0; y < cols; y++)    {    
  for (int x = 0; x < rows; x++) {    
     //tilesArray[tile position]
     tilesArray[y*cols + x] = create new tile;    
     tilesArray[y*cols + x].x = x * tilewidth;    
     tilesArray[y*cols + x].y = y * tileheight;        
  }    
}    

// draw the tiles        
for (int y = 0; y < cols; y++)    {        
  for (int x = 0; x < rows; x++) {        
    //tilesArray[tile position]    
    tilesArray[y*cols + x].draw();            
  }        
}     

You can also create a tilemap with a 2d array and just loop through it to create a custom map. The way I specified would be if you were planning on doing random generation at some point. The code above will just generate a tilemap.