Terrain map generator with JavaScript and HTML5/CSS I'm trying to generate maps (as in terrain maps) using JavaScript only, but currently performance is pretty bad at best.

What my script currently does is:


Generate a square base grid for the map and print it
For each cell, check the adjacent cell's terrain type and select the terrain for the current cell
Print the results


How can I improve performance? (I'm aware that the current result looks nothing like an actual map, but one thing at a time.)

I've hosted my current script here.

(base and terrain properties are CSS classes)

$(document).ready(function () {
    var x = 50;
    var y = 50;
    var worldMap = [];

    worldMap = genesis(x, y, worldMap);
    worldMap = terraform(x, y, worldMap);
});

function genesis(x, y, worldMap) {
    for (i = 0; i &lt; x; i++) {
        worldMap[i] = [];
        for (var j = 0; j &lt; y; j++) {
            worldMap[i][j] = {
                xCoord: i,
                yCoord: j,
                base: "cell",
                terrain: "baren"
            };
            //console.log(worldMap[i][j]);
        }
    }

    var world = $(".world");

    for (i = 0; i &lt; x; i++) {
        var row = document.createElement("div");
        row.className = "row";

        for (j = 0; j &lt; y; j++) {
            var cell = document.createElement("div");
            cell.className = worldMap[i][j].base + " " + worldMap[i][j].terrain;
            cell.setAttribute('data-row', i);
            cell.setAttribute('data-col', j);
            row.appendChild(cell);
        }

        world.append(row);
    }

    return worldMap;
}


function selectTerrain(worldMap, cell) {
    var terrain = ["river", "river", "forest", "forest", "plain", "plain", "plain", "desert", "mountain"];

    var i = cell.xCoord;
    var j = cell.yCoord;

    console.log(i + " " + j);

    for (var a = -1; a &lt; 2; a++) {
        for (var b = -1; b &lt; 2; b++) {
            var m = parseInt(i) + parseInt(a);
            var n = parseInt(j) + parseInt(b);

            if (typeof worldMap[m] != "undefined") {
                if (typeof worldMap[m][n] != "undefined") {
                    var adj = worldMap[m][n];
                    console.log(adj);
                    console.log("Is defined");
                    if (adj.terrain != "baren") {
                        console.log("Is not baren");
                        for (z = 0; z &lt; 4; z++) {
                            terrain.push(adj.terrain);
                        }
                        console.log(terrain);
                    }
                }
            }

        }
    }

    var selectedIndex = Math.floor(Math.random() * (terrain.length - 0)) + 0;
    var selectedTerrain = terrain[selectedIndex];

    return selectedTerrain;
}

function terraform(x, y, worldMap) {
    for (var i = (x-1); i-- ;) {
        for (var j = (y-1); j--; ) {
            var mappingCell = worldMap[i][j];
            console.log(mappingCell);
            var selectedTerrain = selectTerrain(worldMap, mappingCell);

            worldMap[i][j].terrain = selectedTerrain;

            console.log(mappingCell.terrain);

            var cell = $("[data-row=" + i + "][data-col=" + j + "]");
            cell[0].className = mappingCell.base + " " + mappingCell.terrain;
        }
    }

    return worldMap;
}
That map looks super cool! The performance isn't THAT bad, considering you're generating 2500 DIV elements :) 

What you could do is generate one Canvas instead of so many DIVS. The GPU can render a canvas super-fast. That will also be helpful if you start adding more elements to your game. 

There is no reason to use jQuery, so you can get rid of that too :)