Why does this loop cause a stack overflow?

Question

I decided to mess around with jquery and make a simple axonometric map based game. It renders some of the map, then has an issue with stack. (Maximum call stack size exceeded) I am just using background colors for the tiles for now.

JS Bin Here

var map = [
  "g","g","g","s","s",
  "g","g","s","s","w",
  "g","g","s","w","w",
  "g","g","s","w","w",
  "g","g","s","w","w"
];
var x = 0;
var y = 0;
var count = 0;
var background;
function init() { $.each( map, function( key, value ) {

    x += 30;
    y += 60;
  if (count > 4){
    x -= 120;
    y -= 360;
    count = 0;
  }
    if (value == "g"){background = "#00ff00";}
    if (value == "w"){background = "#0000ff";}
    if (value == "s"){background = "#ffff00";}

    $('.map_piece').clone().appendTo('body').css({'top' : x + 'px', 'left' : y + 'px','display' : 'block','background' : background});
      count ++;
});
                }

$('document').ready(function(){
 init(); 

});

Answer 1

In each iteration k, you clone 2^k items.

Instead of cloning an element, it might just be easier to create a new element each time:

$('<div class="map_piece">')
    .appendTo('body')
    .css({'top' : x + 'px', 'left' : y + 'px','display' : 'block','background' : background});