MapHandler v2

by Sam Fereday

HTML

<button id="start">
  Generate
</button>
<div id="output"></div>

CSS

span {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  text-align: center;
}

.end {
  border: 1px solid red;
}

button {
  position: relative;
  z-index: 99999;
  float: right;
}

JavaScript

//// Have another look at the algorithm and iteration steps (need implementing). Something isn't working right...
/// http://www.csharpprogramming.tips/2013/07/Rouge-like-dungeon-generation.html
/// http://www.roguebasin.com/index.php?title=Cellular_Automata_Method_for_Generating_Random_Cave-Like_Levels
/// http://www.gridsagegames.com/blog/2014/06/mapgen-cellular-automata/
/// https://www.raywenderlich.com/66062/procedural-level-generation-games-using-cellular-automaton-part-1
// Will add to component later.
// Uses multi-dimensional arrays, will swap later for speed and flatten
// This entire tool is quite prototype-ish. And it needs to be made more functional, but I'll get to that stuff later on.

// Config - ok as global if never changes?
// Nah. Find a better way.
const mapDetails = {
  w: 18,
  h: 512,
  emptyValue: 0,
  wallValue: 1,
  generations: 4
};

const applyLogic = (wallCount, v) => {

  if (v === 1) {

    if (wallCount >= 6) {
      return 1;
    }
    if (wallCount <= 2) {
      return 0;
    }

  } else if (wallCount >= 5) {
    return 1;
  }

  return v;

}


const getAdjacentWalls = (x, y, scopeX, scopeY, w, h, cells) => {

  let startX = x - scopeX;
  let startY = y - scopeY;
  let endX = x + scopeX;
  let endY = y + scopeY;

  let iX = startX;
  let iY = startY;

  let wallCounter = 0;

  // Could probably convert this to run using the cellmap function, then just pass the value above to determine
  // the logic.
  for (iY = startY; iY <= endY; iY++) {
    for (iX = startX; iX <= endX; iX++) {

      if (!(iX === x && iY === y)) {

        // This too is a bit stinky.
        // But anyway, treats anything out of bounds as a wall also.
        let neighbour = getCell(iX, iY, cells);
        if (!neighbour || neighbour.value === 1) {
          wallCounter += 1;
        }

      }

    }
  }

  return wallCounter;

}

const createMap = (h, w, assignValue) => {

  // height and width flipped for quadrant correction
  const map = [];
  const...