City Generation
by jrj2211
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
ctx.beginPath();
var mapSize = 20;
var cellSize = 15;
var size = mapSize * cellSize;
var TYPES = {
NONE: 0,
RESIDENTIAL: 1,
COMMERCIAL: 2,
INDUSTRIAL: 3,
ROAD: 7,
TEMPLE: 4
}
function RandomRange(min, max) {
return Math.random() * (max - min) + min;
}
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function Cell(i, j) {
this.i = i;
this.j = j;
this.type = TYPES.NONE;
this.id = -1;
this.color = "";
}
function setId(i, j, id) {
if (i < mapSize && j < mapSize) {
grid[i][j].id = id;
}
}
function shuffle(array) {
var copy = [],
n = array.length,
i;
// While there remain elements to shuffle…
while (n) {
// Pick a remaining element…
i = Math.floor(Math.random() * array.length);
// If not already shuffled, move it to the new array.
if (i in array) {
copy.push(array[i]);
delete array[i];
n--;
}
}
return copy;
}
// Get all cells as a 1 dimensional array
function GetAllCells() {
var cells = [];
for (var i = 0; i < mapSize; i+=2) {
for (var j = 0; j < mapSize; j+=2) {
cells.push(grid[i][j]);
}
}
return cells;
}
function getType(i, j) {
return grid[i][j].id % 5;
}
function getCell(i, j) {
return grid[i][j];
}
function getNeighbors(i, j) {
var neighbors = [];
if (IsInBounds(i - 1, j))
neighbors.push(getCell(i - 1, j));
if (IsInBounds(i + 1, j))
neighbors.push(getCell(i + 1, j));
if (IsInBounds(i, j - 1))
neighbors.push(getCell(i, j - 1));
if (IsInBounds(i, j + 1))
neighbors.push(getCell(i, j + 1));
return neighbors;
}
function IsInBounds(i, j) {
return !(i < 0 || i >= mapSize || j < 0 || j >= mapSize);
}
// Check if the neighbor to the right or below is a road and if so replace self as a road...