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 < x; i++) {
worldMap[i] = [];
for (var j = 0; j < 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 < x; i++) {
var row = document.createElement("div");
row.className = "row";
for (j = 0; j < 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 < 2; a++) {
for (var b = -1; b < 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 < 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;
}