I have successfully been able to add new tiles and place random trees on a 2d map grid however I haven't used chunks. I just load a new tile when the player moves and save it to the map array. But I have had some issues with the forests. And I'm thinking chunks would solve my problem. The problem is my forest just appears on the map when the player moves left or up. But I want to focus on how to handle the chunks because I know if I get that right I'll be able to solve the other symptoms to the main problem. Here is a link to the game.
https://76295db93db3812642fa5ba984c042fa81ffc37c.googledrive.com/host/0B6H3TRExU5M9eEkyd2FreHhiNlU/
Here is how I generate new tiles. This runs every game loop and not sure if that is the best way to do it. Does this cause lag? The bottom of the function checks if the tiles need to be updated to forest graphics. I know this is probably the wrong way to do it but I maybe if I get the chunk thing figured out I won't have these issues.
map.update = function() { for(var x = Math.floor(player.x - map.width / 2); x < Math.floor(player.x - map.width / 2) + map.width + 2; x++){ for(var y = Math.floor(player.y - map.height / 2); y < Math.floor(player.y - map.height / 2) + map.height + 2; y++){ //Surrounding tiles var tiles = []; //Check if tile needs to be generated var check = function(x, y) { if(typeof map.data[x] === 'undefined') { map.data[x] = []; } if(typeof map.data[x][y] === 'undefined') { map.data[x][y] = new Tile(x, y, map.generate.groundLayer(), map.generate.playerLayer(x, y), map.generate.aboveLayer(), map.generate.event()); } //Add tile to collection tiles.push(map.data[x][y]); }; //Center check(x, y); //Top check(x, y - 1); //Top Right check(x + 1, y - 1); //Right check(x + 1, y); //Bottom Right check(x + 1, y + 1); //Bottom check(x, y + 1); //Bottom Left check(x - 1, y + 1); //Left check(x - 1, y); //Top Left check(x - 1, y - 1); //Check if there is a forest /* if(map.data[x][y].playerLayer === sprite.forest.topLeftCorner) { tiles[3].playerLayer = sprite.forest.topRightCorner; tiles[4].playerLayer = sprite.forest.bottomRightCorner; tiles[5].playerLayer = sprite.forest.bottomLeftCorner; } */ } } };