JSFiddle - React, Tailwind, and code Playground

by STHayden

HTML

<div id="map"></div>

CSS

#map {
  position: absolute;
  top: 800px;
  left: 800px;
  zoom: 0.3;
}

#map  > div {
  background: pink
}
#map  > div:hover {
  background: rgba(0,0,0,0.5)
}

JavaScript

var Tile = function(x, y) {
	this.x = x;
  this.y = y;

	return this;
}
Tile.prototype.setup = function(e) {
	var neighbors = this.map.getTileNeighbors(this);
	this.type = 'green';
  
  var chanceOfWater = 0.025;
  var waterCount = 1;
  for (var i in neighbors) {
      if(neighbors[i].type === 'blue' && 'ewns'.indexOf(i) > 0) { chanceOfWater = (chanceOfWater) + 0.3; }
      if(neighbors[i].type === 'blue' && 'nw sw ne se'.indexOf(i) > 0) { chanceOfWater = (chanceOfWater) + 0.1; }
      if(neighbors[i].type === 'navy') { this.type = 'navy'; }
  }
  
  if (Math.random() > 1  - chanceOfWater && this.type !== 'navy') {
  	this.type = 'blue'
    
    if(Math.random() < 0.01) {
    	this.type = 'navy'
    }
  }
  
  if (this.type == 'green') {
  	var chanceOfMountains = 0.025;
    for (var i in neighbors) {
        if(neighbors[i].type === 'brown' && 'ewns'.indexOf(i) > 0) { chanceOfMountains += 0.3; }
        if(neighbors[i].type === 'brown' && 'nw sw ne se'.indexOf(i) > 0) { chanceOfMountains += 0.1; }
    }

    if (Math.random() > 1  - chanceOfMountains) {
      this.type = 'brown'
    }
  }
}

var Map = function(height, width) {
	this.tiles = [];
  
  for (var y = 0; y < height; y++) {
  	for (var x = 0; x < height; x++) {
    	var t = new Tile(x, y);
    	t.map = this;
    	this.tiles.push(t)
    }
  }

	return this;
}
Map.prototype.getTile = function(x, y) {
	var t = this.tiles.find(t => t.x === x && t.y === y);

  if (!t) {
  	t = new Tile(x, y);
    t.map = this;
    this.tiles.push(t);
  }
  return t;
}
Map.prototype.getTileNeighbors = function(tile) {
	return {
  	'n': this.getTile(tile.x, tile.y - 1),
    'ne': this.getTile(tile.x + 1, tile.y - 1),
    'e': this.getTile(tile.x + 1, tile.y),
    'se': this.getTile(tile.x + 1, tile.y + 1),
    's': this.getTile(tile.x, tile.y + 1),
    'sw': this.getTile(tile.x - 1, tile.y + 1),
    'w':  this.getTile(tile.x - 1, tile.y),
    'nw': this.getTile(tile.x - 1, tile.y - 1)
  }
}

window.map = new Map(1,...